Vuex深入解读(适用于Vue2)

Vuex是Vue官方推出的 一个 状态管理工具，其能生成一个单独的全局状态实例，其有以下特点：

注意事项 ：版本号在362以下的vuex适用于vue2，若在vue2的工程项目中直接 npm i vuex -s 会报如下的错误

解决办法是指定版本号，vue2使用的版本目前最高支持到362，具体可在 更新记录 中进行查阅。

State相对于vuex来说就好比vue组件中的data，所以声明state必须是 纯粹的对象 (含有零个或多个的 key/value 对) ，在建立后，State数据会被转换为响应式的数据。

首先定义一个store，里面只包含State，然后我们将其注入到全局，下面一次进行以上三种形式的测试

1在vue组件中访问

注:由于不能修改store数据，所以一般不建议在data中访问store的数据，因为它没有缓存效果，一般在计算属性中获取state数据。

mapState 语法糖的主要作用是将store中的state映射到当前vue实例的computed中

在没有 mapState 时，我们获取state一般在computed中进行获取，对于获取多个state数据，那么我们就要写多个computed方法，如下

针对于写多个computed的繁琐和冗余，使用 mapState 可以帮助我们生成 计算属性 。

当映射的计算属性的名称与 state 的数据名称相同时，我们也可以给 mapState 传一个字符串数组。

mapState 返回的是一个对象，如果computed只包括 mapState ，那么直接写

如果你的computed还有其它store之外的属性，那么你需要使用剩余运算符，把mapState返回的对象和其它计算属性对象合并

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在mainjs文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象

Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）

Mutation ：存放改变state值的方法（同步）

Action ：触发mutations里面的方法（异步）

module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this$storestate

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。

当然也能用到 watch 去监听

State中的辅助函数 mapState

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

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象

使用 state 作为其第一个参数

可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this$storegetters

Getters中的辅助函数 mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this$storecommit('方法名') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）

可以向 storecommit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步 *** 作，Action的作用就是异步触发Mutations

定义action对象

接收一个 context 参数和一个要变化的形参

context 与 store 实例具有相同的方法和属性，所以他可以执行 contextcommit("") ，也可以使用 contextstate 和 contextgetters 来获取 state 和 getters 。

使用 this$storedispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

不会。vuex中watch的使用，在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex，是store模块文件写相关的数据信息。vuex是一个专门为vue，js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

原因是直接执行npmrunbuild，生成一个output目录。

查阅了官网的配置文档，发现appbuildAssetsDir可以改变静态资源的输出路径（默认值也的确是_nuxt），于是将其改成/后再次打包，然而并没有任何变化。在仔细看了两遍文档无果后，只能撸起袖子从代码入手，最后在output/server/chunks/rendermjs里发现。

nuxt-client-init-module为Nuxtjs提供了在客户端初始化时注入处理的能力。就像nuxtServerInit一样，可以在根Vuex模块中实现nuxtClientInit *** 作，该 *** 作仅在客户端渲染时执行。vue-cil项目中通过localstorage或者cookie使vuex的状态持久化，因为vuex刷新后数据会丢失。nuxt项目中created钩子中不存在window对象（localstorage或者cookie的设置需要window对象），比如想要获取登录状态即判断是否存在token时，只能在mounted中进行 *** 作，但这样又会引发一个问题，就是进页面的一瞬间还是无法得知登录状态，体验上会有影响，会存在显示用户名等组件显示隐藏延迟。

        将VueX安装在生产环境依赖中

        npm  install  vuex  --save

     说明：

        1   通过vue实例中的store选项

        2   是为了将store对象挂Vue的原型$store上

        3  这样所有的组件内部就可以使用 this$store 来 *** 作store

             所谓的单一状态树，用一个对象包含应用中全部的状态，这个对象作为唯一数据源而存在。也就是意味着每个应用只包含一个store实例。

             在组件中使用state中的数据

     示例总结：

        1  可以直接修改Vuex中的状态（但不推荐），因为直接修改不利于调试

    1 有的是我们对于store里的state中派生一些状态出来，如：数据的过滤

    2 在获取数据后进行过滤处理，同样的逻辑可能会在不同的地方使用

    3 在Vue中也可以采用计算属性进行处理（计算属性就是会将数据处理进行缓存的）

    4  Vuex提供了一个getter，类似于store中的计算属性，根据依赖状态计算值后返回并缓存起来

    5  只有当getter依赖的状态发生了改变时才会被重新计算

1  Getter的第一个参数为状态state，用于收获Getter的依赖状态

2  Getter的第二个参数

     Getter的第二个参数就是选项Getters，作用是用来获取其他Getter函数

3  通过方法访问

  说明：

     1  通常对于getter的使用方法，都是返回处理完毕后的数据

     2  但是有的时候我们需要处理数据的条件是外部传递过来的，例如示例过滤价格

     3  getter可以返回一个函数，这个函数用来接收外部传递的参数

总结：

    1、getter返回的不是确定的值而是一个函数

     2、那么此时在通过$storegettersfilterFruits获取到的就是一个函数

     3、既然是函数就可以当成方法使用, 传递参数

     4、如 $storegettersfilterFruits(20)

以上就是关于Vuex深入解读(适用于Vue2)全部的内容，包括:Vuex深入解读(适用于Vue2)、Vue笔记（Vuex全局状态管理器）、vue中路由里会去获取vuex中数据吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！