分析比对vuex和store模式

在 Vue 中，Vuex 和 store 模式 是两个不同的概念，它们紧密相关，主要用于管理应用的状态。下面我会详细介绍这两个概念，并通过例子帮助你更好地理解。

1. Vuex 是什么？

Vuex 是 Vue.js 的一个状态管理库，用于集中管理应用中所有组件的共享状态。它可以帮助我们在多个组件之间共享数据，并保持数据的统一性。Vuex 的核心思想是“单一数据源”，即整个应用的状态都集中保存在一个地方——store。

Vuex 的核心概念：

State（状态）：保存应用的状态，类似于组件的 data。
Mutations（变更）：改变 state 的唯一方式，mutations 是同步的操作。
Actions（行为）：可以包含异步操作，最终会提交一个 mutation 来改变 state。
Getters（获取器）：从 state 中派生出状态的计算值。
Modules（模块）：Vuex 支持将 store 分割成模块，每个模块都有自己的 state、mutations、actions 和 getters。

Vuex 的基本用法：

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubledCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

然后在 Vue 组件中使用：

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

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

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

在这个例子中，store 管理了 count 的状态，mutations 用于同步修改 count，actions 用于异步修改 count，而 getters 提供了 doubledCount 这个派生状态。

问：其中…是什么？

在 Vue 中的 … 是 JavaScript 的扩展运算符（Spread Operator）。它可以将对象或数组的内容展开（解构），在 Vuex 的场景中，主要用于将 Vuex 的方法或状态映射到 Vue 组件中。

在 Vuex 中 … 的作用

当我们在 Vue 组件中需要访问 Vuex 的 state 或 actions 时，可以通过 mapState 和 mapActions 等辅助函数进行映射。这些辅助函数会返回一个对象，我们可以使用扩展运算符 … 将这个对象解构并合并到组件的 computed 或 methods 选项中。

举例说明

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

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

//不用...
export default {
  computed: {
    count() {
      return this.$store.state.counter; // 手动映射 state
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // 手动映射 action
    }
  }
};
</script>

//使用...
export default {
  computed: {
    ...mapState(['count']) // 自动映射 state
  },
  methods: {
    ...mapActions(['increment']) // 自动映射 action
  }
};

在这里，我们使用 … 将 mapState 和 mapActions 返回的对象直接合并到 computed 和 methods 中。最终效果是一样的，但代码更加清晰简洁。

store 模式是什么？

store 模式（有时称为 “模块化 Store”）是 Vuex 的一种设计模式，指的是将 Vuex 的 state、mutations、actions 和 getters 分割到多个模块中，每个模块管理自己的一部分状态。这样可以帮助我们在大型应用中保持代码的结构清晰，方便维护。

模块化 store 示例：

// store/modules/user.js
export default {
  state: () => ({
    name: 'John'
  }),
  mutations: {
    setName(state, name) {
      state.name = name;
    }
  },
  actions: {
    updateName({ commit }, name) {
      commit('setName', name);
    }
  },
  getters: {
    uppercasedName(state) {
      return state.name.toUpperCase();
    }
  }
};

// store/modules/cart.js
export default {
  state: () => ({
    items: []
  }),
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    addItemToCart({ commit }, item) {
      commit('addItem', item);
    }
  },
  getters: {
    cartItemCount(state) {
      return state.items.length;
    }
  }
};

// store/index.js
import { createStore } from 'vuex';
import user from './modules/user';
import cart from './modules/cart';

const store = createStore({
  modules: {
    user,
    cart
  }
});

export default store;

在这个例子中，我们将 user 和 cart 分成两个模块来管理它们各自的状态。store/index.js 中将这些模块合并为一个全局的 Vuex store。

使用时：

<template>
  <div>
    <p>User: {{ userName }}</p>
    <p>Cart Items: {{ cartItemCount }}</p>
    <button @click="addItemToCart({ name: 'Product 1' })">Add Item</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState({
      userName: state => state.user.name,
      cartItemCount: state => state.cart.cartItemCount
    })
  },
  methods: {
    ...mapActions('cart', ['addItemToCart'])
  }
};
</script>

通过 mapState 和 mapActions，你可以访问和操作 user 和 cart 模块中的状态和行为。模块化的设计使得不同功能的状态和逻辑分开管理，代码更容易维护和扩展。