Vue中 store 项目实战

 

 index.js：

import Vue from 'vue';
import Vuex from 'vuex';
import createLogger from 'vuex/dist/logger';
import * as getters from './getters';
import state from './state';
import actions from './action';
import mutations from './mutations';

Vue.use(Vuex);

const modules = {};
const plugins = [];

// 插件
const debug = process.env.NODE_ENV === 'development';
if (debug) {
  plugins.push(createLogger());
}

// modules 的注入
const req = require.context('./modules', true, /(.*\/)*([^.]+).[jt]s?$/);
req.keys().forEach((mod) => {
  let v = req(mod);
  let namespace = '';
  if (v && v.default) {
    v = v.default;
  }
  if (typeof v === 'object') {
    v.namespaced = true;
    namespace = v.namespace || mod.replace(/(\.\/|\.[jt]s)/g, '');
  }
  modules[namespace] = v;
});

export default new Vuex.Store({
  getters,
  state,
  actions,
  mutations,
  strict: debug,
  plugins,
  modules,
});

 在main.js全局配置文件内引入Vuex：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import '@/assets/css/common.scss';

import directive from './utils/directive'
import * as filters from './utils/filters'

//自定义指令
// 注册全局filter
Object.keys(filters).forEach((key) => {
    Vue.filter(`filter_${key}`, filters[key]);
});


Vue.config.productionTip = false;
Vue.use(utils);
Vue.use(directive);


new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount('#root');