js实现vuex

Vuex 简介

Vuex 是 Vue.js 的官方状态管理库，用于集中管理应用的所有组件的状态。通过 Vuex，可以更高效地管理共享状态，并提供响应式的数据绑定。

安装 Vuex

在项目中安装 Vuex：

npm install vuex --save

创建 Vuex Store

在 JavaScript 中，可以通过以下方式创建一个 Vuex 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++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

核心概念

State

State 是 Vuex 的单一状态树，存储应用的所有共享状态。

state: {
  count: 0
}

Mutations

Mutations 是唯一可以修改 State 的方法，必须是同步函数。

mutations: {
  increment(state) {
    state.count++;
  }
}

Actions

Actions 用于处理异步操作，通过提交 Mutations 来修改 State。

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
}

Getters

Getters 类似于计算属性，用于从 State 中派生出新的状态。

getters: {
  doubleCount(state) {
    return state.count * 2;
  }
}

在 Vue 组件中使用 Vuex

在 Vue 组件中，可以通过 this.$store 访问 Vuex Store：

// 访问 State
this.$store.state.count;

// 提交 Mutation
this.$store.commit('increment');

// 分发 Action
this.$store.dispatch('incrementAsync');

// 访问 Getter
this.$store.getters.doubleCount;

模块化 Vuex

对于大型应用，可以将 Vuex 拆分为多个模块：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});

严格模式

启用严格模式后，任何非 Mutation 修改 State 的行为都会抛出错误：

const store = new Vuex.Store({
  strict: true,
  state: { ... }
});

总结

Vuex 提供了一种集中式状态管理机制，适用于中大型 Vue.js 应用。通过 State、Mutations、Actions 和 Getters，可以实现高效的状态管理和数据流控制。