VueX在Vue-cli中的使用

2018-05-03  本文已影响0人  刘三慢

下载: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解决模块间传值问题

上一篇 下一篇

猜你喜欢

热点阅读