VueX在Vue-cli中的使用

下载:npm install vuex --save

如果管理的状态不是很多可以只用一个js文件进行管理。

在main.js中引入

import store from  './store'

在 new vue({}) 中使用。


如果状态过多,推荐使用官方推荐的结构。

为了方便维护在src文件夹下创建一个store文件夹。在根目录中创建一个index.js 存储状态,创建一个modules文件夹,分别创建actions.js,mutations-type.js,mutations.js三个文件。


(第一次用VueX,以下是个人理解)

actions 和 mutations 作用一样。但是actions是异步 mutations 是同步,mutation 执行完成后都可以对应到一个新的状态。如果用actions进行状态的更新,如果有多个异步操作,更新状态会存在竞争

actions:不能直接变更数据,所以用来调用mutations.js中定义的方法


mutations:同步执行更新状态


mutations-type:存放mutations中的方法名


mutations中的方法名推荐大写(貌似是官方还是尤大大推荐?忘了)

main.js中的引入就改为 import store from './store/index'

获取状态

在computed中定义方法  需要使用的数据的地方直接写方法名

简写  引入VueX的mapState 

 mapState函数返回的是一个对象通,过扩展运算符将store.state.companyValue映射this.companyValue 

要使用数据的地方直接填写companyValue


修改状态通过dispatch调用actions中定义的方法的名称,然后调用mutations中的方法进行更新状态,可以传递一个参数。


简写不能直接传递参数,还得定义一个方法


具体详细方法请看:

vuex最简单、最详细的入门文档

Vue系列——在vue项目中使用echarts

[vuex]——使用vuex解决模块间传值问题

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容