关于vuex的使用方法详解（全）

一.什么是vuex?

官方解释：vuex是一个专门为vue.js应用程序开发的“状态管理模式”。

个人理解：vuex就是一个管理者，集中管理组件的所有状态，是一个全局存储器，管理对象为众多组件的共享部门。它可以解决任何组件之间自由传值。

例如：用于管理用户的登录信息，购物车信息等。

总结：用于储存项目中需要多次用到的变量，便于在项目中复用，减少代码的冗余。

二.需要用到的变量和函数

1.state：存放要设置的全局访问变量state对象初始值

state:{ count:0, changeShowCom:true },

2.getters：实时监听state的变化(最新状态)

getters:{ 
    getCount:state=>state.count, // 承载变化的count的值 
    isShow:state=>state.changeShowCom // 承载变化的changeShowCom的值
},

3.mutations：将参数传递给mutations中的函数进行计算

mutations:{     
    // 这里面的参数除了state之外还传了需要增加的值sum     
    // +1     
    addCount(state,num){       
        state.count=state.count+num     
    },     
    // -2     
    subCount(state,num){       
        if(state.count>0){         
            state.count=state.count-num       
        }else{         
            state.count=0       
        }     
    }   

4.actions：类似于mutation，提交mutation中的函数，而不是直接更改状态，可以包含任意异步操作。

actions:{     
    // num为要变化的形参     
    getAddCount(context,num){       
        context.commit('addCount',num)     
    },     
    getSubCount(context,num){       
        context.commit('subCount',num)    
    }   
}

> 二.使用方法

方法1：直接用store对象提交mutations里addCount()方法，简单易懂适合小白。

this.$store.commit('addCount',1) // 方法1-提交更新内容

方法2：通过actions分发getAddCount()任务去提交mutations里的addCount()方法，action类似于中间件，不直接更改状态。

this.$store.dispatch('getAddCount',1) // 方法2-分发更新内容

方法3：通过辅助函数去提交内容，原理同方法2。

// 在使用辅助函数之前，需要进行引入 
import {mapState,mapGetters,mapActions} from 'vuex' // 方法3
// 初始化actions中的方法，可自定义新函数名接收：
methods:{ 
    ...mapActions({   
        getAddCountNew:'getAddCount', 
        getSubCountNew:'getSubCount' 
    }) } 
    // 获取state对象中的变量，以下有两种方法：
    computed:{    
        ...mapState({       
        count1:state=>state.count     
    }),     
    ...mapGetters([       
        'getCount',       
        'isShow'     
       ])   
    }

页面调用：

this.getAddCountNew(1) // 方法3-辅助函数更新内容

最终效果：

四.完整代码：

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 
export default new Vuex.Store({   
    // 要设置的全局访问变量state对象-初始值   
    state:{     
        count:0,     
        changeShowCom:true   
    },   
    // 实时监听state的变化(最新状态)   
    getters:{     
        getCount:state=>state.count, // 承载变化的count的值    
        isShow:state=>state.changeShowCom // 承载变化的changeShowCom的值   
    },   
    // 参数传递给mutations中的函数进行计算   
    mutations:{     
        // 这里面的参数除了state之外还传了需要增加的值sum     
        // +1     
        addCount(state,num){       
            state.count=state.count+num     
        },     
        // -2     
        subCount(state,num){       
            if(state.count>0){         
                state.count=state.count-num       
            }else{         
                state.count=0      
            }     
         }  
     },  
     // action 类似于mutation   
     // action 提交的是mutation,而不是直接更改状态   
     // action 可以包含任意异步操作   
     actions:{     
         // num为要变化的形参     
         getAddCount(context,num){       
             context.commit('addCount',num)     
         },     
         getSubCount(context,num){       
             context.commit('subCount',num)     
         }   
     } 
  })

vuexPage.vue

<template>   
    <div class="">     
        <span>vuex</span>     
        <p>this.$store.state.count={{this.$store.state.count}}</p
        <p>this.$store.getters.getCount={{this.$store.getters.getCount}}</p>     
        <el-button @click="add">(+)</el-button>     
        <el-button @click="sub">(-)</el-button>     
        <p>from mapState={{count1}}</p>     
        <p>from mapGetters={{getCount}}</p>   
     </div> 
</template> 
<script> 
    // 在使用辅助函数之前，需要进行引入 
    import {mapState,mapGetters,mapActions} from 'vuex' 
    // 方法3 
    export default {   
      name:'',   
      data(){     
        return{}   
      },   
      mounted(){},   
      methods:{     
          add(){       
              // this.$store.commit('addCount',1) 
              // 方法1-提交更新内容       
              // this.$store.dispatch('getAddCount',1) 
              // 方法2-分发更新内容       
              this.getAddCountNew(1) 
              // 方法3-辅助函数更新内容     
          },       
          sub(){      
              // this.$store.commit('subCount',2) 
              // 方法1-提交更新内容       
              // this.$store.dispatch('getSubCount',2) 
              // 方法2-分发更新内容       
              this.getSubCountNew(2) 
              // 方法3-辅助函数更新内容     
          },     
          ...mapActions({       
              getAddCountNew:'getAddCount',       
              getSubCountNew:'getSubCount'     
          })   
      },   
      computed:{     
          ...mapState({       
              count1:state=>state.count     
          }),     
          ...mapGetters([       
              'getCount',       
              'isShow'     
          ])   
       } 
     } 
 </script>

转载请注明原作者 不喜勿喷，欢迎补充~~