在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)