在js文件中引入Vuex 和 Vuex 模块化说明
1.目录结构介绍
2.模块引入
import Vue from 'vue'
import Vuex from 'vuex'
import one from '@/store/modules/one.js'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
one
}
})
export default store
3.模块内部写法
@/modules/one.js
(1)简单写法:
const state = {
TEST_DATA: []
}
const getters = {
}
const mutations = {
upTestData (state, data) {
state.TEST_DATA = data
}
}
const actions = {
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
(2)标注写法:
const one = {
namespaced: true,
state: () => ({
count: 0
}),
mutations: {
increment (state: any) {
state.count++
console.log('mutation : ', state.count)
},
},
getters: {
doubleCount (state: { count: number }) {
return state.count * 2
}
},
actions:{
increment (context: { commit: (arg0: string) => void }, payLoad: { amount: any }){
console.log('moduleA actions context', context)
console.log('moduleA actions payload : ', payLoad.amount)
setTimeout(()=>{
context.commit('increment')
},3000)
},
}
}
export default one
3.js文件中引入Vuex
由于这个vuex是一个整体,所以必须把store文件夹整个引入到文件中
即import store from 'xxxxx/store'
引入state:
store.state.(modules).(name):store.state.editor.currentPageId
引入gettres:
store.getters['(modules)/(name)']:store.getters[‘editor/currentActiveElementData’]
引入mutations:
store.commit('(modules)/(method)', payload):store.commit(‘editor/setCurrentActiveElementIdList’, {list: idList})
引入actions:
store.dispatch('(modules)/(method)', payload)