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中的方法进行更新状态,可以传递一个参数。

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

具体详细方法请看: