分析比对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 模块中的状态和行为。模块化的设计使得不同功能的状态和逻辑分开管理，代码更容易维护和扩展。