vuex · 前端菜鸟成长记

[TOC] # vuex Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 ***** ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放数据 state:{num:0,}, // getters对state中的数据做处理，相当于computed（getters是全局的） getters :{}, // mutations做同步操作，（定时器，axios都不可使用），相当于组件中的methods mutations :{}, // actions做异步操作，实际修改state状态值的还是mutations actions :{}, // 主模块 modules: { } }) ``` ## 1.state state存放Vuex的数据，相当于Vue中的data >index.js ``` state:{num:0,} ``` >demo1目录，获取vuex中的state值 ```HTML <template> <div> //绑定，方法一 <h2>兄弟组件1 + {{this.$store.state.num}}</h2> //方法二 <h2>兄弟组件1 + {{$store.state.num}} </h2> </div> </template> ``` ## 2.getters getters对state中的数据做处理，相当于computed（但getters是全局的） >index.js目录 ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放数据 state:{num:0,}, // getters对state中的数据做处理，相当于computed（getters是全局的） getters :{ // state作为实参传入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定时器，axios都不可使用），相当于组件中的methods mutations :{}, // actions做异步操作，实际修改state状态值的还是mutations actions :{}, // 主模块 modules: { } }) ``` >demo2目录，获取getters中的值 ``` <template> <div> //绑定 <h2>兄弟组件2 + {{getNum}}</h2> //方法二 <h2>兄弟组件1 + {{$store.getters.getNum}}</h2> </div> </template> <script> export default { // 可在store中的getters属性中写 computed:{ // 1.方法一 computed: { getNum(){ return this.$store.getters.getNum; } }; </script> ``` ## 3.mutations 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，每个 mutation 都有一个字符串的**事件类型 (type)**和一个**回调函数 (handler)**。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。**只能做同步操作** ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放数据 state:{num:0,}, // getters对state中的数据做处理，相当于computed（getters是全局的） getters :{ // state作为实参传入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定时器，axios都不可使用），相当于组件中的methods mutations :{// 方法 // payload，形参，如果组件在commit时传参使用，组件不传参则为undefined，可写可不写 increase(state,payload){ state.num += payload ? payload : 1 ; }, // 累减 decrease(state){ state.num--; },}, // actions做异步操作，实际修改state状态值的还是mutations actions :{}, // 主模块 modules: { } }) ``` >btn目录，同步累加 ``` <template> <div>      <button @click="$store.commit('increase',2)">点击累加</button> </div> </template> <script> export defalut { methods:{ addFn() { // 使用commit调用mutations的中的increase方法 // 传参的话，使用payload，不传参数为undefined // this.$store.commit('increase',2); this.$store.commit("increase"); }, } } </script> ``` ## 4.actions Action 类似于 mutation，不同在于： * Action 提交的是 mutation，而不是直接变更状态。 * Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用`context.commit`提交一个 mutation，或者通过`context.state`和`context.getters`来获取 state 和 getters ```js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // state存放数据 state:{num:0,}, // getters对state中的数据做处理，相当于computed（getters是全局的） getters :{ // state作为实参传入 getNum(state){ return state.num; }, }, // mutations做同步操作，（定时器，axios都不可使用），相当于组件中的methods mutations :{// 方法 // payload，形参，如果组件在commit时传参使用，组件不传参则为undefined，可写可不写 increase(state,payload){ state.num += payload ? payload : 1 ; }, // 累减 decrease(state){ state.num--; },}, // actions做异步操作，实际修改state状态值的还是mutations actions :{ // 异步操作，1秒后再减1 decreaseAsync(context){ context.commit('decrease'); } }, // 主模块 modules: { } }) ``` >btn目录，延期一秒后 -1（异步操作） ``` <template> <div>   <button @click="reduce" >点击-1</button>  <button @click='$store.dispatch("decreaseAsync")'> 点击 -1</button> </div> </template> <script> export defalut { methods:{ reduce(){ // $store.dispatch触发store中的actions this.$store.dispatch('decreaseAsync'); } } } </script> ``` ## 5.modules 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成**模块（module）**。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。 ***** 在子模块中要打开命名空间，这样便于可使用点语法获取到子模块的内容` namespace:true` ## 6.辅助函数辅助函数有4个，分别是mapState，mapGetters，mapMutations，mapActions。需现在使用的组件中引入辅助函数，在component中使用的是mapState，mapGetters，在methods中使用的是mapMutations，mapActions。 >demo1目录 ``` <template> <div> <h2>兄弟组件1 + {{num}}</h2> <h2>兄弟组件1 + {{getNum}}</h2> </div> </template> <script> // 映射到store中 import {mapState,mapGetters} } from 'vuex' export default { //使用mapState方法 // 使用扩展运算符取出state中的参数对象 ...mapState(['num']), ...mapGetters(["getNum"]), }, }; </script> ``` >btn目录 ``` <template> <div>  <button @click="increase(2)">点击 + 1</button> <button @click="decreaseAsync()">点击延迟 - 1</button> </template> <script> import {mapMutations , mapActions} from 'vuex' export default { methods: { // 辅助函数写法 ...mapMutations(['increase']), ...mapActions(['decreaseAsync']), }, }; </script> ```