前言

vuex 与 pinia ，做项目时该选择哪一个呢，又或是在学习 vue 时该研究哪一个呢，我的回答是：前者看情况，后者的答案就是两个都得给我学。

状态管理模式对于一个 vue 项目不要太重要，要知道，vue 中最牛的就是组件化和它那响应式的数据，每个组件都有自己的数据、方法，在自己的组件修改自己的状态确实方便，但当多个组件共享同一状态时，传参就会变得复杂起来。

这时，一个合适的状态管理库可以让我们事半功倍。除了当个切图仔，数据的管理也是重中之重，响应式、层次结构、计算属性、数据流等等都是我们需要考虑到的。

vuex

我们先来聊聊 Vuex ，它是 Vue.js 的官方状态管理库，帮助我们管理应用程序中的状态（数据）。

Vuex 通过集中管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，使得状态管理变得简单且易维护，所有的状态修改都需要经过它。

Vuex：都给我按流程走！！！

基础概念：

• State: 存储状态的对象。
• Getters: 从 State 中派生出的状态，例如计算属性。
• Mutations: 触发状态变化的方法，必须是同步执行。
• Actions: 包含业务逻辑的函数，可以包含异步操作，并可以调用 Mutations 来改变状态。
• Modules: 对 store 进行模块化，使状态管理更加清晰。

按顺序简述：

1. State

• 定义：一个普通的 JavaScript 对象，用于存储应用的状态。它是应用的单一数据源。
• 作用：保存应用的所有状态数据，这些数据可以被任何组件访问。
• 示例：

const store = new Vuex.Store({
    state: {
        count: 0,
        user: {
            name: 'John Doe',
            age: 30
        }
    }
});

2. Getters

• 定义：用于需要计算的属性，它们可以根据 state 中的数据派生出新的状态，类似于computed。
• 作用：简化从 state 中获取复杂数据的过程，它们是响应式的，当依赖的 state 发生变化时，getters 也会重新计算。
• 示例：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        doubleCount: state => state.count * 2
    }
});

3. Mutations

• 定义：用于改变 state 的方法。它们必须是同步函数。
• 作用：提供了一种显式的方式来更改状态，并且可以通过 Vue 的 debugger 工具追踪状态的变化。
• 示例：

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

4. Actions

• 定义：类似于 mutations，不同之处在于它可以进行异步操作，并且通过调用 mutations 来改变状态。
• 作用：用于处理异步操作，如网络请求等。
• 示例：

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

5. Modules

• 定义：将 store 分割成模块。每个模块拥有自己的 state、getters、mutations 和 actions。
• 作用：有助于组织大型应用的状态，使其更加模块化和可维护。
• 示例：

const store = new Vuex.Store({
    modules: {
        user: {
            namespaced: true,
            state: {
                name: 'John Doe',
                age: 30
            },
            getters: {
                fullName: state => `${state.name} ${state.age}`
            },
            mutations: {
                setName(state, name) {
                    state.name = name;
                }
            },
            actions: {
                updateName({ commit }, name) {
                    setTimeout(() => {
                        commit('setName', name);
                    }, 1000);
                }
            }
        }
    }
});

整合起来：

store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

export default store;

components/Counter.vue:

<template>
    <div>
        <p>{{ doubleCount }}</p>
        <button @click="asyncIncrement">Async Increment</button>
    </div>
</template>

<script>
    export default {
        computed: {
            doubleCount() {
                return this.$store.getters.doubleCount;
            }
        },
        methods: {
            asyncIncrement() {
                this.$store.dispatch('asyncIncrement');
            }
        }
    };
</script>

在上述代码中：

• doubleCount 是一个 getter，它返回 state 中 count 的两倍。
• increment 是一个 mutation，它将 state 中的 count 增加 1。
• asyncIncrement 是一个 action，它等待一秒后调用 increment 这个 mutation。

Pinia

Pinia 与 vuex 一比，就是个非常年轻的库了，它的使用简单易懂，减少了 mutation 这个操作，与 Vue 3 的 Composition API 更加契合。Pinia 提供了一个简洁、易于理解和使用的 API，同时仍然保留了 Vuex 的许多高级功能。

基础概念：

• Stores: 用于保存状态和相关逻辑的对象。
• Getters: 计算属性，用于派生状态。
• Actions: 方法，用于更新状态或执行业务逻辑。
• PersistedState: 用于持久化状态的插件。

同样我们举出与上面相似的示例

不一样的是我们需要在你的 Vue 应用中使用这个 Pinia Store。

main.js:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { useCounterStore } from './stores/counter';

const app = createApp(App);

// 安装 Pinia
app.use(createPinia());

app.mount('#app');

components/Counter.vue:

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

<script setup>
    import { useCounterStore } from '../stores/counter';

    const counterStore = useCounterStore();
    const { count, doubleCount } = counterStore;
    const { asyncIncrement } = counterStore.actions;
</script>

stores/counter.js:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
    id: 'counter', // 必需的唯一标识符
    state: () => ({
        count: 0
    }),
    getters: {
        doubleCount: (state) => state.count * 2
    },
    actions: {
        asyncIncrement() {
            setTimeout(() => {
                this.count++;
            }, 1000);
        }
    }
});

与vuex的例子一对比，是不是简化了不少操作。

小结：

pinia简洁易于上手，但当做大型项目时，Vuex 还是一个更好的选择，它提供了更多的功能和更强大的状态管理能力，且非常成熟，拥有广泛的社区支持和丰富的文档资源。