谈谈个人对vuex的理解和看法

近期学习到了vuex，来分享一下我对vuex的理解和看法

什么是vuex？

用我个人的话来说就是：vuex就是一个专门用来管理vue组件之间进行通信的一个管理工具，也就是一个全局管理工具，比如你在state中定义了一个属性，那么你就可以在所用的组件中来获取和修改这个值并且你的修改可以被全局响应变更

安装vuex

在vue2.0中下载vuex

指令：

     cnpm install vuex

然后 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

回到store文件的index.js里面，我们先声明一个state变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的Vuex.Store里面传入一个空对象，并把刚声明的变量state仍里面：

做完上面三个步骤，你就可以在任何一个组件通过 this.$store.state来获取vuex中state里面定义的属性了

在vue3.0中

首先通过vue-cli3创建一个项目（这里使用webpack模板）

  vue create 项目名称

这里选择手动配置，在接下来的选择中将vuex选中即安装了Vuex，项目中便可使用

项目创建成功后我们就可以进入store.js中编写代码

vuex几大核心属性：

1.state

用来管理和存储vue中的属性,Vuex通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。更新Counter的实现：

2.getters（相当于State的计算属性）

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

3.mutations（提交更改数据的方法，同步！必须是同步函数）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

4.actions（像一个装饰器，包裹mutations，使之可以异步。）

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1）action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说 action中我们既可以处理同步，也可以处理异步的操作

2）action改变状态，最后是通过提交mutation

5.modules （ 模块化Vuex）

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
modules：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理

辅助函数

为什么要使用辅助函数？

在使用vuex的时候，仅仅了解State、Getters、Mutations、Actions、Modules等概念，在使用过程中，业务功能逐渐增加，会出现很多个状态。当一个组件需要多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

1.mapState

mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用，通常我们需要一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给computed属性。

2.mapGetters

mapGetters将store中的getter映射到局部计算属性

3.mapMutations

使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

4.mapAction

使用mapActions辅助函数将组件的methods映射成store.dispatch调用

命名空间

当modules中导入的组件过多，并且有相同的方法名，当你想调用这个方法的时候系统默认的调取的是最后导入组件中的那个方法，而不是你想调用的那个组件，这时候你就可以用namespaced:true来给那个组件命名

以上就是我对vuex的一些理解