vue项目中使用vuex

store文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import { getToken } from '../utils/auth'

const state = {
  tenantId: '',
  userId: '',
  token: getToken(),
  login: false, // 是否登录
  name: '',
  avatar: '',
  userInfo: null, // 用户信息
  menuForVue: []
}
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})
复制代码

action.js

import { getMenus, getTenantInfo } from '@/api/portal.js'

export default {
  // 获取菜单列表
  getMenus ({ commit }) {
    return new Promise((resolve, reject) => {
      getMenus().then(response => {
        const data = response.content
        console.log(response)
        commit('GET_MENUS', data.list)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
  // 获取租户ID
  getTenantInfo ({ commit }) {
    return new Promise((resolve, reject) => {
      getTenantInfo('00000000000001').then(response => {
        const data = response.content
        // console.log(response)
        commit('GET_TENANTINFO', data.uuid)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

复制代码

mutations.js

import {
  LOGIN_BYUSERNAME,
  GET_MENUS
} from './mutation-type'
export default {
  [LOGIN_BYUSERNAME] (state, data) {
    state.userId = data
  },
  [GET_MENUS] (state, data) {
    state.menuForVue = data
  }
}
复制代码

mutations-type.js

export const LOGIN_BYUSERNAME = 'LOGIN_BYUSERNAME'
export const GET_MENUS = 'GET_MENUS'
复制代码

在组件中使用

使用computed

created () {
     this.$store.dispatch('getMenus')
}
computed: {
    menuForVue: function () { 
      return this.$store.state.menuForVue
    }
  }
复制代码

使用vuex的import { mapGetters } from 'vuex'的话
你需要先在getters.js文件中

const getters = {
  menuForVue: state => state.menuForVue
}
export default getters
复制代码

在组件中

computed: {
    ...mapGetters([
      'menuForVue'
    ])
  },
created () {
    console.log(this.menuForVue)
}
复制代码

以上是使用流程 具体vuex的原理暂时不介绍了 有兴趣的童鞋去官网看看 [ ]: vuex.vuejs.org/zh/guide/