vue

vuex

辅助函数

state和getter在computed mutations和actions在methods
所有映射过来的值,都是挂载在this上了

state

1. 直接使用:
	 this.$store.state.xxxx 
2. 页面引入:
	import { mapState } from "vuex";
	
	computed: {
    ...mapState(['tang']) // 页面可以{{tang}}使用(想当于把tang映射到this值上)
  }

getter

计算state的函数方法统一存放

写入
export default new Vuex.Store({
  state: {
    leng: [1,2,3]
  },
  getters:{
    doneCount(state){
      return state.leng.length;
    }
  }
})

导入使用
import { mapState, mapGetters } from "vuex";
export default {
  name: "About",
  data() {
    return {};
  },
  computed: {
    count1() {
      return this.$store.state.count;
    },
    ...mapState(['tang']), // 页面可以{{tang}}使用
    ...mapGetters({getlen:'doneCount'})
  }
};

mutations

动态更新state

创建
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: { // 每次同步修改值
    addCount(state,payload){ // 自动获取state的值
      state.count+=payload
    }
  }
})

引入&使用
import { mapState, mapGetters,mapMutations } from "vuex"; // 引入
export default {
  name: "About",
  data() {
    return {};
  },
  methods:{
    addFn(){
      this.$store.commit('addCount',10) // 直接派发,10是参数
    },
    addFn2(){
      this.addCount(1) // 由于mapMutations,所以直接把addCount方法挂载在了this里
    },
    ...mapMutations(['addCount']) // 使用需要this.addCount
  }
};

actions

异步更新vuex状态异步提交mutations,可解构context

创建
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  actions: { 
    asyncReduceCount(context,payload){ // context => 解构 state/getters/commit/dispatch
      console.log(context);
      setTimeout(()=>{
        context.commit('reduceCount',3)
      },1000)
    },
    asyncPromise({commit}){ // 在页面里可以.then
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          commit('reduceCount',5)
          resolve('传给vuex并且页面获取数据')
        },5000)
      })
    }
  }

引入&使用
import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {
  methods:{
    asyncMinues(){ // 当前页面直接获取promise的值
      this.$store.dispatch('asyncPromise').then((data1)=>{
        console.log(data1);
      })
    },
    ...mapActions(['asyncReduceCount']) // 页面可以@绑定这个事件
  }
};

Module

模块化以后获取state/actions都是需要多一层路径不方便使用辅助函数,都是直接this.$store.dispatch('a模块/方法b')类似于这样的

import { mapState, mapGetters,mapMutations,mapActions } from "vuex";
export default {

  computed: {
    count1() {
      console.log( this.$store.state.moduleA);
      return this.$store.state.moduleA.count;
    }
  },
  methods:{
    addFn(){ // 重点是路径多一层/ 因为namespace的值设定固定
      this.$store.commit('moduleA/addCount',10)
    },
    asyncMinues(){ // 重点是路径多一层/ 因为namespace的值设定固定
      this.$store.dispatch('moduleA/asyncPromise').then((data1)=>{
        console.log(data1);
      })
    }
  }
};

vuex使用与理解

vue

vuex

state

getter

mutations

actions

Module