关于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)
})
 
 

转载于:https://www.cnblogs.com/liuhp/p/9714979.html

你可能感兴趣的:(关于vuex中state、mutation、mutation-type、getters,action的设置)