在vue中增加vuex

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数据