Vuex Modules模块分割

最新推荐文章于 2024-10-09 16:30:27 发布

每一天，每一步

最新推荐文章于 2024-10-09 16:30:27 发布

阅读量205

点赞数

分类专栏： Vue 文章标签： javascript vue.js node.js vuex

本文链接：https://blog.csdn.net/u010234868/article/details/120656868

版权

Vue 专栏收录该内容

123 篇文章 2 订阅

订阅专栏

本文展示了如何在Vue.js应用中使用Vuex进行模块化的状态管理。通过`state.js`定义状态，`getters.js`获取状态，`mutations.js`修改状态和`actions.js`处理异步操作，实现组件间的数据同步。在`store/index.js`中整合这些模块，创建Vuex store。这有助于维护大型应用的状态并提高代码组织性。

摘要由CSDN通过智能技术生成

state.js：

export default {
  count: 10,
  msg: 'hello vue',
  lists: [
    {id: 1, name: 'banana'},
    {id: 2, name: 'lemon'},
    {id: 3, name: 'watermelon'},
    {id: 4, name: 'apple'}
  ]
}

getters.js：

export default {
  lists(state) {
    // console.log(state);
    return state.lists;
  },
  getListById: (state) => (i) => {
    return state.lists[i];
  }
}

mutations.js：

export default {
  addCount(state, payload) {
    state.count += payload.num;
  },
  addCount2(state, num) {
    state.count += num;
  },
}

actions.js：

export default {
  addCountAsyn({ commit }, payload) {
    setTimeout(() => {
      commit('addCount2', payload.num);
    }, 1000);
  }
}

store->index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './moduleA/state'
import getters from './moduleA/getters'
import mutations from './moduleA/mutations'
import actions from './moduleA/actions'

Vue.use(Vuex)
// Vue.config.devtools = true
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});