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>
说明,每增加一个vuex数据js文件只需要在store/modules/vuex/modules下创建使用即可;然后更改模板中的文件名称: 如下: