Vue - 用小白的学习方式去掌握 Vuex 使用

た入场券 2022-12-30 15:58 27阅读 0赞

### 文章目录 ###

*  Vuex 是什么
 *   *  状态管理是什么？
     *  响应式是什么？
 *  不用 Vuex 也是可以的
 *  使用
 *   *  安装
     *  知识储备
     *   *  全局 store
         *  State
         *   *  computed 计算属性
             *  mapState 辅助函数
         *  Getters
         *  Mutations
         *  Actions
         *  Modules
     *  购物车示例

# Vuex 是什么 #

[Vuex是什么][Vuex]

*  一个专为 `Vue.js` 应用程序开发的响应式状态管理模式.

## 状态管理是什么？ ##

> 从我个人角度来看，状态可以指代数据。而状态管理也就可以看作数据管理，主要是用于分层解耦。

在`Vuex`中状态管理可以看作是全局变量，这个变量可以通过`state`取出变量映射到`view`中，也可以根据用户的输入`actions`改变该变量

## 响应式是什么？ ##

> 从我个人角度来看，响应式就是自适应。

在`Vuex`中响应式是指数据（状态）的改变能够及时的所有数据变更为最新的数据。

# 不用 Vuex 也是可以的 #

*  从父组件一层一层将数据传递给子组件（麻烦）
 *  通过 EventBus 的订阅/发布模式实现数据数据传递

[可看这篇文章介绍：什么情况下我应该使用 Vuex][Vuex 1]

# 使用 #

## 安装 ##

[npm 安装][npm]

npm install vuex --save

## 知识储备 ##

### 全局 store ###

参考：[shoppint-cart 示例][shoppint-cart]  
在 `store` 目录下创建`index.js`

import Vue from 'vue'
    import Vuex from 'vuex'
    import cart from './modules/cart'
    import products from './modules/products'
    import createLogger from '../../../src/plugins/logger'
    
    Vue.use(Vuex)
    
    const debug = process.env.NODE_ENV !== 'production'
    
    export default new Vuex.Store({ 
      // 注入其它模块的 store
      modules: { 
        cart,
        products
      },
      strict: debug,
      plugins: debug ? [createLogger()] : []
    })

在`app.js`中注入`store`，如：

import Vue from 'vue'
    import App from './components/App.vue'
    import store from './store'
    import {  currency } from './currency'
    
    Vue.filter('currency', currency)
    
    new Vue({ 
      el: '#app',
      store, // 全局注入
      render: h => h(App)
    })

如在`counter`组件中通过`this.$store`去使用

this.$store.commit('increment')

### State ###

> 用于声明数据。

#### computed 计算属性 ####

> 对于任何复杂逻辑，你都应当使用计算属性。

例如下面的示例中，第二个 message ,如果我们要在 view 中写也是可以，但是会比较复杂，如下：

<p>Computed reversed message: "{
       { message.split('').reverse().join('') }}"</p>

那么我们可以将该复杂写法通过`计算属性`封装成一个方法，直接调用该`方法对象`即可。  
示例：

<div id="example">
      <p>Original message: "{ { message }}"</p>
      <p>Computed reversed message: "{ { reversedMessage }}"</p>
    
      
      <p>Computed reversed message: "{ { this.$store.state.counter.message.split('').reverse().join('') }}"</p>
    
    </div>
    
    var vm = new Vue({ 
      el: '#example',
      data: { 
        message: 'Hello'
      },
      computed: { 
        // 计算属性的 getter
        reversedMessage: function () { 
          // `this` 指向 vm 实例
          // 使用 vuex 则可通过 $store 取到数据之后再转换，如下
          // return this.$store.state.counter.message.split('').reverse().join('')
          return this.message.split('').reverse().join('')
        }
      }
    })
    
    输出结果：
    
    Original message: "Hello"
    
    Computed reversed message: "olleH"

#### mapState 辅助函数 ####

> 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 `mapState` 辅助函数帮助我们生成计算属性。

辅助函数，用于简化`this.$store.state`，示例如下：

<template>
      <div>
        
        Clicked: { {  $store.state.counter.count }} times.
        <br>
        
        mapState使用: { {  count }} times.
      </div>
    </template>
    
    <script>
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import {  mapState } from 'vuex'
    
    export default { 
    
      computed:{ 
        ...mapState({ 
          count: state => state.counter.count
        }),
      },
    
      methods: { 
      }
    }
    </script>

有时候我们需要从 `store` 中的 `state` 中派生出一些状态。  
如上面的字符串反转功能就是派生出来的，我们可以使用`Getters`去实现。

### Getters ###

> 可以认为是 `store` 的计算属性。`getter` 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

通过一个示例来看一下`getters`如何使用。  
`Counter.vue`文件如下：

<template>
      <div>
        <p>hello 字符串反转:{ {  reverseStr }}</p>
        <p>getter 获取 todo done: { {  doneTodosCount }}</p>
        <p>传入 getters 做参数：{ {  doneTodosCount }}</p>
        <p>直接访问：{ {  doneTodos }}</p>
      </div>
    </template>
    
    <script>
    // 在单独构建的版本中辅助函数为 Vuex.mapGetters
    import {   mapGetters } from "vuex";
    
    export default { 
      computed: { 
        // 由于使用了命名空间，因此需要加上，否则获取反转的字符串如： reverseStr:'counter/reverseStr'
        ...mapGetters('counter',{ 
          reverseStr: "reverseStr",
          doneTodosCount: "doneTodosCount",
          doneTodos: "doneTodos",
        }),
      },
    
    };
    </script>

`counter.js`文件如下：

const state = () => ({ 
        message: 'hello',
        todos: [{ 
                id: 1,
                text: '写日报',
                done: true
            },
            { 
                id: 2,
                text: '看一篇英文文章',
                done: false
            }
        ]
    })
    
    // getters
    const getters = { 
        doneTodos: state => {  
            return state.todos.filter(todo => todo.done)
        },
        doneTodosCount: (state, getters) => {  // 传入 getters 做参数
            return getters.doneTodos.length
        },
        reverseStr: state => { 
            return state.message.split('').reverse().join('')
        }
    }
    
    export default { 
        namespaced: true,
        state,
        getters,
    }

### Mutations ###

通过提交 `mutation` 的方式，而非直接改变 `store.state.count`。  
其实也就是通过方法的方式去操作数据。而且`Mutation` 必须是同步函数，如果是异步函数请使用下一节的`Action`

看个示例：每次点击`increment`文本+2，每次点击`decrement`文本-2  
`Counter.vue`文件如下

<template>
      <div>
         <p @click="mIncrement">mutations 获取 increment: { {  mutationsCount }}</p>
         <p @click="mDecrement">mutations 获取 decrement: { {  mutationsCount }}</p>
      </div>
    </template>
    
    <script>
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import {  mapState } from "vuex";
    
    export default { 
      computed: { 
        ...mapState({ 
          count: (state) => state.counter.count,
          mutationsCount: (state) => state.counter.mutationsCount,
        }),
      },
    
      methods: { 
        mIncrement() { 
          this.$store.commit("counter/mIncrement",2);
        },
        mDecrement() { 
          this.$store.commit("counter/mDecrement",{ 
            amount:2
          });
        },
    
      },
    };
    </script>

`counter.js`如下：

const state = () => ({ 
        mutationsCount:0,
    })
    const mutations = { 
    
        mIncrement(state, n) { 
            state.mutationsCount += n
        },
        // 通过对象传递
        mDecrement(state,payload) { 
            state.mutationsCount -= payload.amount
        },
    }
    
    export default { 
        namespaced: true,
        state,
        mutations
    }

### Actions ###

`Action` 类似于 `mutation`，不同在于：

*  `Action` 提交的是 `mutation`，而不是直接变更状态。
 *  `Action` 可以包含任意异步操作。

`counter`计数器示例：  
`Counter.vue`文件如下：

<template>
      <div>
        Clicked: { {  $store.state.counter.count }} times.
        <br />
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
       
      </div>
    </template>
    
    <script>
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import {  mapState, mapGetters } from "vuex";
    
    export default { 
      computed: { 
        ...mapState({ 
          count: (state) => state.counter.count,
        }),
      },
    
      methods: { 
    
        increment() { 
          this.$store.dispatch("counter/increment");
        },
        decrement() { 
          this.$store.dispatch("counter/decrement");
        },
      },
    };
    </script>

`counter.js`文件如下：

const state = () => ({ 
        count: 0,
    })
    const mutations = { 
        increment(state) { 
            state.count++
        },
        decrement(state) { 
            state.count--
        },
    }
    
    const actions = { 
        increment: ({ 
            commit
        }) => commit('increment'),
        decrement: ({ 
            commit
        }) => commit('decrement'),
    }
    
    export default { 
        namespaced: true,
        state,
        actions,
        mutations
    }

### Modules ###

也就是分模块。  
例如`Counter`组件，在 `store/modules`下创建`counter.js`用于处理`store`相关的数据，而`Counter.vue`组件页面就正常写即可。  
接着在`store/`目录下的 `index.js`添加 `module`的注入。具体可看上文的`store`全局注入。

## 购物车示例 ##

对照上面的分析，你可以很容易看懂`Vuex examples 中的 shoppint-cart`示例了  
[shoppint-cart 示例地址][shoppint-cart]

该示例是通过`shop.js`模拟数据，然后将`products 和 cart`组件注入`全局 store`  
然后`ProductList.vue`展示`shop.js`中的商品列表，而`ShoppingCart.vue`展示购物车数据。

END~

[Vuex]: https://vuex.vuejs.org/zh/
[Vuex 1]: https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%B8%8B%E6%88%91%E5%BA%94%E8%AF%A5%E4%BD%BF%E7%94%A8-vuex
[npm]: https://vuex.vuejs.org/zh/installation.html
[shoppint-cart]: https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart