Vue项目中配置vuex

安装

npm install vuex --save

在main.js中

import store from './store'

下面添加上store
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

配置文件

文件目录是这样

index.js中的内容

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

Vue.use(Vuex)

// 加载modules
const modules = {}
const moduleContext = require.context(
  './modules/',
  false,
  /\.js$/
)
moduleContext.keys().forEach(key => {
  const name = key.split('/') // ./map.js
    .pop() // map.js
    .replace(/\.\w+$/, '') // map
  modules[name] = moduleContext(key).default
})

export default new Vuex.Store({
  modules
})

homeState.js是我用来存储首页状态的文件，里面的示例内容是这样的

/*
* @description 首页状态存储
* */

const state = {
  menuState: 'layer' // 菜单此刻所选中的状态
}

const mutations = {
  // 设置菜单此刻状态
  SET_MENU_STATE (state, choose) {
    state.menuState = choose
  }
}

const actions = {
  setMenuState ({ commit }, choose) {
    commit('SET_MENU_STATE', choose)
  }
}

export default {
  namespaced: 'homeState',
  state,
  mutations,
  actions
}