详细介绍vue中vuex详解及实例

什么是vuex?

vuex是Vue.js框架的官方状态管理插件，用于处理应用程序中的组件通信和全局状态管理。它将整个应用程序的状态分离到一个统一的状态存储中心（store）中，使得状态的变化更加方便、可追踪、可维护。

  
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      }
    });
  

vuex的核心概念

vuex的核心概念包括：state、getters、mutations、actions、modules。

state：存储整个应用程序的状态，作为唯一数据源。

  
    const store = new Vuex.Store({
      state: {
        count: 0
      }
    });
  

getters：派生出一些状态，相当于store的计算属性。

  
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      getters: {
        getCount(state) {
          return `当前计数为${state.count}`;
        }
      }
    });
  

mutations：修改state中的状态，同步操作，只能通过触发mutation来修改state。

  
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      }
    });
  

actions：异步操作，可以包含多个mutation，通过commit来触发mutation，处理比较复杂的异步操作（如axios请求）。

  
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        asyncIncrement({commit}) {
          setTimeout(() => {
            commit('increment');
          }, 1000);
        }
      }
    });
  

modules：将store分割成不同的模块，每个模块都具有自己的state、getters、mutations、actions，有助于应对大型复杂的应用程序。

  
    const store = new Vuex.Store({
      modules: {
        moduleA: {
          state: {
            countA: 0
          },
          mutations: {
            incrementA(state) {
              state.countA++;
            }
          },
          actions: {
            asyncIncrementA({commit}) {
              setTimeout(() => {
                commit('incrementA');
              }, 1000);
            }
          }
        },
        moduleB: {
          state: {
            countB: 0
          },
          mutations: {
            incrementB(state) {
              state.countB++;
            }
          },
          actions: {
            asyncIncrementB({commit}) {
              setTimeout(() => {
                commit('incrementB');
              }, 1000);
            }
          }
        }
      }
    });
  

vuex的应用实例

1. 初始化store

  
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment(state) {
          state.count++;
        }
      },
      actions: {
        asyncIncrement({commit}) {
          setTimeout(() => {
            commit('increment');
          }, 1000);
        }
      },
      getters: {
        getCount(state) {
          return `当前计数为${state.count}`;
        }
      }
    });
  

2. 在App.vue中使用store

3. ModuleA.vue和ModuleB.vue组件中的使用

总结

vuex是Vue.js框架的官方状态管理插件，它将整个应用程序的状态分离到一个统一的状态存储中心（store）中，方便我们对状态的管理和操作。vuex的核心概念包括：state、getters、mutations、actions、modules。应用vuex可以提高代码的可维护性和可读性。建议学习和使用。