js实现vuex

Vuex 在 JavaScript 中的实现

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。以下是在 JavaScript 中实现 Vuex 的核心方法。

创建 Vuex Store

Vuex 的核心是 store（仓库），它包含了应用的状态（state）和改变状态的方法（mutations）。创建一个 Vuex store 需要定义 state、mutations、actions 和 getters。

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: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    getCount: state => state.count
  }
});

export default store;

在 Vue 组件中使用 Vuex

在 Vue 组件中，可以通过 this.$store 访问 Vuex store 的状态和方法。也可以通过 mapState、mapMutations、mapActions 和 mapGetters 辅助函数简化代码。

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['getCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['increment'])
  }
};

模块化 Vuex Store

对于大型应用，可以将 Vuex store 分割成模块（modules）。每个模块可以拥有自己的 state、mutations、actions、getters，甚至是嵌套模块。

const moduleA = {
  state: () => ({ countA: 0 }),
  mutations: {
    incrementA(state) {
      state.countA++;
    }
  }
};

const moduleB = {
  state: () => ({ countB: 0 }),
  mutations: {
    incrementB(state) {
      state.countB++;
    }
  }
};

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

插件和持久化

Vuex 支持插件机制，可以通过插件扩展功能。例如，使用 vuex-persistedstate 插件实现状态持久化。

import createPersistedState from 'vuex-persistedstate';

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

严格模式

在开发环境中，可以启用严格模式，确保状态的变更只能通过 mutations 进行。

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

动态注册模块

在运行时动态注册模块，适用于按需加载的场景。

store.registerModule('dynamicModule', {
  state: () => ({ dynamicCount: 0 }),
  mutations: {
    incrementDynamic(state) {
      state.dynamicCount++;
    }
  }
});

示例代码

以下是一个完整的 Vuex 实现示例：

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: {
    getCount: state => state.count
  }
});

export default store;

在组件中使用：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
};
</script>