关于vuex中state、mutation、mutation-type、getters,action的设置

收集的vue组件：

https://blog.csdn.net/wang1006008051/article/details/77970492

1.新建一个store文件夹，新建index.js文件，内容如下：

import Vue from 'vue';

import Vuex from 'vuex';

import state from './state';

import mutations from './mutations';

import actions from './actions';

import * as getters from './getters';

import createLogger from 'vuex/dist/logger'; // vuex调试工具

Vue.use(Vuex);

// 开发环境下开启严格模式

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({

getters,

state,

mutations,

actions,

strict: debug,

plugins: debug ? [createLogger()] : []

});

2.新建state.js文件，内容如下：

//import paras from './paras';

const state = {

　　keys:''

};

export default state;

3.新建mutation-type.js,内容如下：

export const SET_Keys = 'SET_Keys ';

 

4.新建mutation.js，内容如下：

import * as types from './mutation-types';

const mutations = {

[types.SET_Keys ](state, value) {

　　　　state.keys= value;

　　}

};

export default mutations;

 

5.新建getters.js，内容如下：

export const getKeys = state => state.keys;

 

6.新建actions.js，内容如下：

const actions = {

　　　　myFunc({state, commit}, chartsPieObj) {

　　}

}

export default actions;

 

7.在入口文件main.js中使用:

import store from './store';

window.vm = new Vue({

    el:'#app',

    store,

    router,

    i18n,

    render: c => c(App)

})