vue 项目中的 vuex 简单封装

代码结构:

 index.js :

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

import state from './state'
import actions from './actions'
import mutations from './mutations'
import modA from './modules/modA.js'

export default new Vuex.Store({
  state,
  actions,
  mutations,
  modules: {
    modA
  }
})

 state.js :

const state = {
  count:1
};

export default state;

mutations.js :

const mutations = {
  increment(state,param){
    state.count += n
  }
}

export default mutations;

actions.js :

const actions = {
  incrementAct({commit},argNum){  //argNum为参数
    commit('increment',augNum)
  }
}
  
export default actions;

modA.js :

// A 模块的内容
const state = {
  //A模块的数据
};

const mutations = {
  //A模块的 mutations
};

const actions = {
  //A模块的actions
};
  
export default {
  state,
  actions,
  mutations
};

 

详细用法参见官网:Vuex 官网

或者另一篇文章:VueJS中学习使用Vuex详解

 

posted @ 2021-05-29 16:06  smil、梵音  阅读(302)  评论(0编辑  收藏  举报