24、vuex 命名空间的使用

// store 文件下的index.js
import state from "./states";
import actions from "./actions";
import mutations from "./mutations";
import city from './module/city'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    city
  }
})
// city.js
const state = {
  list: ['a', 'b'],
  count: 0
}

const mutations = {
  mutations_push(state, text) {
    state.list.push(text)
  },
  mutations_add(state) {
    state.count++
  },
  mutations_reduce(state) {
    state.count--
  }
}

const actions = {
  actions_push: ({ commit }, text) => {
    commit('mutations_push', text)
  },
  actions_add: ({ commit }) => {
    commit('mutations_add')
  },
  actions_reduce: ({ commit }) => {
    commit('mutations_reduce')
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}
// 测试页面 test.vue





你可能感兴趣的:(24、vuex 命名空间的使用)