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

官方解释：vuex是一个专门为vue.js应用程序开发的 “状态管理模式”。
个人理解：vuex就是一个管理者，集中管理组件的所有状态，是一个全局存储器，管理对象为众多组件的共享部门。它可以解决任何组件之间自由传值。
例如：用于管理用户的登录信息，购物车信息等。
总结：用于储存项目中需要多次用到的变量，便于在项目中复用，减少代码的冗余。

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

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

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

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

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
      }
    }
  },

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>

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