vuex-详细解读
vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
理解：多个组件共享状态（即数据），由vuex统一管理。
核心概念
- state：定义状态属性（变量）
- getters：对数据获取之前的再次编译，相当于状态管理（store）的计算属性。我们在组件中使用 $sotre.getters.add()
- mutations：同步操作。修改状态，通过commit提交mutations，在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions：异步操作。 通过mutations提交actions,在组件中使用是$store.dispath('')
- modules：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象,对象越大越复杂。
所以Vuex 将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
安装
npm install vuex --save
创建项目
写个demo吧 为方便讲解，文档内容与实际demo有差异，
先总结哈：
1.获取store中某状态属性：通过$store.xxx 或 computed 或 getters 或mapState 或mapGetters
2.同步时：$store.commit—触发—mutaion—改变—state
this.$store.commit('addCount') 可写成 ...mapMutations(['addCount']);
3.异步时：$store.dispatch—提交— mutation —通过—commit —改变—state
this.$store.dispatch('addCount') 可写成 ...mapActions(['addCount']);
4.使用mapMutations，mapActions等 前需要引入
import { mapState,mapGetters, mapMutations,mapActions } from 'vuex';
目录大概如下：
第一步：创建store.js(可自行取名)引入vuex,并且实例化
//store.js中 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 状态属性 state: { count:0, }, // 状态管理中的计算属性 getters:{ }, // 修改state中的值，需改变mutations，改变mutations需用commit mutations: { }, // 管理mutations actions:{ } }) export default store;
第二步：在main.js中引入store.js
import Vue from 'vue' import App from './App' import router from './router' import store from'./store/store.js' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
此时已经正确创建store仓库，并可投入使用了。
下面如何获取store中的count呢？
1.第一种：通过$store.state.count
<h2>{{$store.state.count}}</h2>
2.第二种：本身计算属性computed取值
<h2>{{getCount}}</h2>
computed:{ getTest(){ return this.$store.state.count; } }
3.第三种：通过getters取值（即相当于通过状态管理中的计算属性取值）
<p>count:{{$store.getters.getCount}}</p>
//在stores.js中
// 状态管理中的计算属性 getters:{ getCount(state){ return state.count+=2; }, },
4.第四种：通过mapState 辅助函数取值
<h1>hello ,{{count}}</h1>
//组件中HelloWorld中 import { mapState} from 'vuex'; export default { computed:{ ...mapState(['count']) }, }
5.第五种：通过mapGetters 辅助函数取值
<h2>{{getCount}}</h2>
//在stores.js中getters中必须存在相应的方法getCount()
// 状态管理中的计算属性
getters:{
getCount(state){ return state.count+=2; },
},
//在组件HelloWorld.vue中使用 import { mapGetters} from 'vuex'; computed:{ ...mapGetters(['getCount']),//相当于this.getCount = this.$store.getters.getCount },
同步时，如何修改count？如果传参？
在helloWorld.vue 的template中
<p> <!-- 第一种：写在函数里 -->
<!--不传参-->
<button @click="addCount()">加</button>
<!--传参--> <button @click="add(5)">加</button>
<!-- 第二种：直接写表达式 --> <!-- 通过commit修改mutations中的，commit('xxxx',n) xxx代表mutations中的xxxx方法,n表示参数--> <button @click="$store.commit('add',5)">每次加5</button> </p>
在helloWorld.vue 的script中
add(){ //commit触发mutations this.$store.commit('addCount'); }, addCount(){ this.$store.commit('addCount'); },
等价于： 使用mapMutations辅助函数
//将this.add映射到this.$store.commit('addCount'); ...mapMutations({ add:'addCount' }), //方法名与mutations中名字一样时可简写 【注：mapMutations绑定数组 ...mapMutations(['aaa','bbb']);】 ...mapMutations(['addCount']);
至于mapMutations如何传参暂无，还有待研究？？？？？
在store.js中
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 状态属性 state: { count:0, }, // 状态管理中的计算属性 getters:{ getCount(state){ return state.count+=2; }, }, // 修改state中的值，需改变mutations，改变mutations需用commit mutations: { add(state,n){ console.log('增加count'); state.count+=n; }, addCount(state){ console.log('增加count,无参数'); state.count++; }, }, }) export default store;
异步时，如何修改msg？如果传参？
其实与同步操作差不多，只是要通过actions来提交mutations
在helloWorld.vue 的template中
<button @click="a_changeMsg()">点击后2000ms修改msg</button> <p>msg:{{$store.state.msg||'暂无'}}</p>
在helloWorld.vue 的script中
a_reduce(){ this.$store.dispatch('a_reduce'); },
等价于：
...mapActions({ a_changeMsg:'a_changeMsg' })
在store.js中
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ // 状态属性 state: { msg:'', }, // 状态管理中的计算属性 getters:{ }, // 修改state中的值，需改变mutations，改变mutations需用commit mutations: { changeMsg(state){ state.msg="我是状态管理" } }, // 管理mutations actions:{ a_changeMsg({commit}){ setTimeout(()=>{ console.log('2000秒后修改msg') commit('changeMsg') },2000); }, } }) export default store;
