vuex基本使用

1.已存储用户信息为例

在store文件下的index.js中写入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: {} // 用户信息
  },
  getters: {
    getUserInfo: state => state.userInfo
  },
  mutations: {
    // 设置用户信息
    SET_USER: (state, userInfo) => {
      state.userInfo = userInfo
    }
  },
  actions: {
    // 设置用户信息
    setUser ({ commit }, userInfo) {
      commit('SET_USER', userInfo)
    }
  }
})

2.在页面中设置用户信息

this.$store.dispatch('setReportCase', false)

3.页面中获取用户信息

import { mapGetters } from 'vuex'

computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  },

直接通过this.userInfo得到用户信息