vue store学习记录【state, mutations, actions的使用】mapActions辅助函数的使用

state是用来存放全局共享的值的。

  state: {
    token: '',
  },

想要更改这些值就要用到mutations

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    }
  }

调用mutations里的方法要用到actions

actions: {
    // 存储token
    Token({ commit }, token) {
      return new Promise((resolve) => {
          commit('SET_TOKEN', token);
          resolve();
      });
    },
  }

{commit}是代表了什么，又是怎么来的。action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：

> context:{
		state,   等同于store.$state，若在模块中则为局部状态
		rootState,   等同于store.$state,只存在模块中
		commit,   等同于store.$commit
		dispatch,   等同于store.$dispatch
		getters   等同于store.$getters
}

常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的
位置写自己想要的属性，如：{commit}。
使用context.commit如下

Token(context, val) {
            console.log(context, "context"); // 与 store 实例具有相同方法和属性的 context 对象 属性有 state、getters、rootGetters、rootState、commit、dispatch
            console.log(val, "val"); // 传的参数
        },

如何调用actions里的方法，如下

this.$store.dispatch("Token");//
this.$store.dispatch("Token", "val123456");//后面是参数
this.$store.dispatch("user/Token", "val123456");//这种写法是调用user模块里的Token

使用mapActions调用actions

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

methods: {
  // --------------------------- Actions
    // this.Token() 映射到 this.$store.dispatch('Token')
    ...mapActions(['Token']),
    // 如果是某一个module下的action,需要带上 namespace
    // 格式: mapActions(namespace,[mutationName])
    // 辅助函数的数组形式
    ...mapActions("user", ["Token"]),
    // 辅助函数的对象形式
    ...mapActions("user", {
      Token: 'Token'
    }),
    ...mapActions("user", {
      alias: 'Token' // 改变模块user中actions 中 方法映射
    }),
    // 方法调用
    change() {
      this.Token("testVal"); // "testVal" 为函数的传参
      this.aliass("testVal");
    }
  }
   computed: {
    /**
      相当于
      num: state => state.count
      message: state => state.msg
     */
    ...mapState({ num: 'count', message: 'msg' }),
    /**
      相当于
      reverseMsg: getters.reverseMsg
     */
    ...mapGetters(['reverseMsg']),
    /**
      重命名,防止与组件内data数据冲突
      相当于
      msgBeReversed: getters.reverseMsg
     */
    ...mapGetters({ msgBeReversed: 'reverseMsg' }),
  }

如何获取state里的值

//组件引入
import store from "@/store";
store.getters.token
//全局调用
this.$store.getter.token //getter获取
this.$store.state.token //state获取
//一般会有很多个模块 获取不同模块的值
this.$store.state.user.token //user是模块的名称，token在user模块的state中

结构

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
  },
  getters
})

export default store

getters

const getters = {
  token: state => state.user.token,
  avatar: state => state.user.pphoto,
  name: state => state.user.name,
}
export default getters