当项目逐渐复杂时,Props会显得苍白无力,所以Vuex就登场了,搭配mapActions、mapMutations和mpState进行开发。


src/vuex/index.js

  1. // 在src下新建vuex文件夹,这里使用modules进行分模块存储状态(推荐)
  2. import Vue from 'vue';
  3. import Vuex from 'vuex';
  4. import meModule from './meModule';
  5. import bookModule from './bookModule';
  6. Vue.use(Vuex);
  7. export default new Vuex.Store({
  8. modules: {
  9. meModule,
  10. bookModule,
  11. }
  12. })

sec/main.js

  1. import Vue from 'vue';
  2. import App from './App';
  3. import store from './vuex';
  4. Vue.config.productionTip = false;
  5. Vue.prototype.$store = store; // 必须挂载到Vue原型上,这样在组件中可以通过this(Vue实例)直接调用
  6. App.mpType = 'app';
  7. const app = new Vue({
  8. ...App,
  9. store, // 添加vuex
  10. })
  11. app.$mount()