vuex的基本用法（提炼公共文件import all vuex modules）

1、第一步是你的package.json中需要有 “vuex”: “3.5.1”；如果没有安装vuex,就先安装一下

2、在src下创建一个文件store，store下创建一个文件modules, index.js; 下面继续创建文件
最终的目录文件如下：
在这里插入图片描述
从最里面开始：

store/modules/vuex/modules 文件用于存放项目中所有的需要利用vuex存储的数据文件；这里里global.js为例
store/modules/vuex/modules/global.js 中：

 export default {
  namespaced: true,
  state: {
    // 页面缓存后是否显示模态框标记
    showModel: false // 标记是否显示模态框
  },
  mutations: {
    /** 设置是否显示模态框的值 */
    setShowModel(state, flag) {
      state.showModel = flag
    }
  }
}

说明：在vuex/modules文件中可以创建很多的js文件，然后在store/modules/vuex/index.js中进行全部引入，避免每次创建，都需要手动的引入文件。
3. store/modules/vuex/index.js 中：

在这里插入代码片const files = require.context('./modules', false, /\.js$/)
const modules = {}

files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default {
  namespaced: true,
  modules
}

在store/index.js 进行引入

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

import vuex from './modules/vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    vuex
  }
})

在main.js中注入

import store from './store'
new Vue({
  el: '#app',
  router,
  store, // store加入
  render: h => h(App)
})

然后去想用的界面使用：

<template>
  <div id="app">
    <router-view />
    <div v-if="showModel">
      测试
    </div>
    <button @click="btnClick">点击改变showModel的值</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState('vuex/global', [
      'showModel' // 映射this.showModel为this.$store.state.showModel
    ])
  },
  methods: {
    ...mapMutations('vuex/global', ['setShowModel']),
    btnClick(){
    	this.setShowModel(!this.showModel)
    }
  }
}
</script>
<style lang="scss"></style>