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返回的对象和其它计算属性对象合并
不会。vuex中watch的使用,在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex,是store模块文件写相关的数据信息。vuex是一个专门为vue,js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
以上就是关于Vuex深入解读(适用于Vue2)全部的内容,包括:Vuex深入解读(适用于Vue2)、vue中路由里会去获取vuex中数据吗、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)