vuex流程
用来管理状态,共享数据,在各个组件之间管理外部状态
第一步:项目安装vuex插件
第二步:引入vuex,并通过use方法使用它
第三步: 创建状态仓库
//创建状态仓库,注意第二个Store是大写的不能改,,state也是不能改
第四步:在main.js注入Vue实例当中
第五步:通过this.$sore.state.XXX拿到全局状态
七、Vuex的相关操作
vuex状态管理的流程
view——>actions—–>mutations—–>state——>view
一、
方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
在其他组件中利用commit来触发mutations函数
this.$mit('increase',xxx) xxx 表示传入参数,如果需要传入多个参数,将 xxx 表示成对象 {xxx1:'',xxx2:''} 方式传入,在对象内构成多个需要传入参数。
方法二:
利用actions中对mucations进行操作,间接对state进行修改
利用dispatch来触发actions函数
mucations和actions两者之间区别
1、传递参数不一样,前者传递是state,后者传递是context。
2、调用的方式不一样,前者靠 this.$mit('xxx') 触发,后者靠 this.$store.dispatch('xxx') 触发。
3、actions可以包含异步操作,但是mutation只能包含同步操作
二、getters是vuex中的一个属性,主要作用于vue中的计算属性(computed)类似,用来存放一些经过修改的数值
在调用getters中的内容是使用$store.getters.函数名进行调用
总结:在工程化项目中,vuex所有内容建议和routers一样,在src中建立一个state文件夹>index.js,将vuex内容写在index.js中,再导出到main.js中。