vuex中 如何使用 mapMutations、mapState

 

首先vue中的store.js中的内容应该大家都熟悉  我还是贴一下代码吧

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    userInfo: null,
    token: '' 
  },
  mutations: {
    saveToken(state, token) {
      state.token = token
    },
    saveUserInfo(state, info) {
      state.userInfo = info
    },
    clearUserInfo(state) {
      state.userInfo = null
    }
  },
  actions: {},
  modules: {},
  plugins: [persistedState({ key: 'openrationManagement' })]
})

这个应该是最基础的代码 

就两个值  一个保存用户信息，一个清理用户信息  还有一个保存toekn 的信息

那我们要如何使用呢？

其实最开始我的写法是这样的

//这是提交保存用户信息；其实就一句话搞定
this.$store.commit('saveUserInfo', this.form)
//那我们要使用userInfo 如何使用呢？
//也是一句话搞定
this.$store.state.userInfo  //取出来赋值就可以了
其实很简单  

那为啥我们要用 mapMutations、mapState呢  这是辅助函数

mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

先在组件中引入 

import { mapMutations, mapState } from 'vuex'

然后在组件中调用

methods: {
    ...mapMutations(['clearUserInfo']),
    handleCommand(command) {
      if (command == 'logout') {
        loginOut().then(res => {
          if (res.code == 200) {
            this.clearUserInfo()
            this.$router.push('/')
          }
        })
      }
    }
  },

在methods中引用  类似上文中提到的

this.$store.commit('clearUserInfo')  

将this.clearUserInfo映射成为 this.this.$store.commit('clearUserInfo')

好 

那我们需要把这个字段取出来使用  怎么办呢？

computed: {
    //使用vuex中的 先调用引入mapState 然后取出值使用  使用方式: this.userinfo
    ...mapState(['token', 'userInfo'])
  }

使用的时候 就是 this.userInfo 就行了  

容易忘记 所以记下来