1. 在vue中引入vuex
参考：https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1
2. 创建文件目录及文件
参考：https://segmentfault.com/a/1190000012015742
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79586124
image.png
image.png
3. index.js
index.js主要是new store，以下写法可以把不同的模块的state分开，这样每个模块就有自己私有的state
import Vue from "vue"
import Vuex from "vuex"
import m1 from './modules/m1'
import m2 from './modules/m2'
Vue.use(Vuex)
//const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules:{
m1,
m2
},
// plugins: debug ? [createLogger()] : []
})
4. main.js注入vuex
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
5. 模块m1、m2
import mdata1 from '@/mockdata/mdata1'
const state={
mdata1:mdata1
}
const getters={
//store的计算属性，不修改state
}
const actions={
//调用mutations中的方法，对state进行操作
}
const mutations={
//定义state数据的修改操作
}
export default{
state,
getters,
actions,
mutations
}
5. 页面调用
this.$store.state.m1.mdata1 //区分模块的情况下，调用某一模块的state数据记得要加哪个模块的数据（m1.mdata1）
this.$store.state.xxx //全局的state数据
