Vuex

 Vuex 的核心概念

State

在 Vuex 中，state 是存储中心，它包含了应用中所有的状态（数据）。你提到的 state01 和 state02 可以理解为在 Vuex 的状态树中管理的不同状态变量。Vuex 允许我们将状态树分割成模块（modules），因此，state01 和 state02 可以是不同模块或组件的状态。

Mutations

Mutations 是更改 Vuex 状态的唯一方法。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，它会接受 state 作为第一个参数。你只能通过提交（commit）一个 mutation 来触发状态的改变。

使用 Action 函数

Actions 类似于 mutations，不同之处在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment') // 假设 'increment' 是一个已定义的 mutation
    }, 1000)
  }
}

使用 dispatch 方法来触发 action：

store.dispatch('incrementAsync')

使用 Getter 函数

Getters 用于从 Vuex 中派生出一些状态，例如对列表进行过滤计数等。可以认为是 store 的计算属性。

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}

在组件中使用 getters：

computed: {
  doneTodos () {
    return this.$store.getters.doneTodos
  }
}

Getters 也可以接受其他 getters 作为第二个参数：

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

Vuex Store 的使用

在 Vuex 中，Store 是一个集中式存储管理应用的所有组件状态的对象。你可以通过以下步骤使用 Vuex Store：

1. 创建 Store：定义一个新的 Store 实例，并传入初始状态和一些 mutations。

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment (state) {
         state.count++
       }
     }
   });
   

2. 在 Vue 应用中使用 Store：通过在 Vue 根实例中注册这个 Store，使其在整个应用中可用。

   new Vue({
     el: '#app',
     store, // 使用 store
     computed: {
       count () {
         return this.$store.state.count
       }
     }
   });
   

理解 Pinia 的核心概念

State

在 Pinia 中，state 是一个返回对象的函数，这个对象就是你的应用状态。

import { defineStore } from 'pinia';

export const useStore = defineStore('main', {
  state: () => ({
    count: 0
  })
});

Actions

Actions 在 Pinia 中用于处理异步操作，可以直接修改 state。

actions: {
  async increment() {
    this.count++
  }
}

Getters

Getters 在 Pinia 中是计算属性，用于从 state 派生新的状态。

getters: {
  doubleCount: (state) => state.count * 2
}

Pinia 与 Vuex 的比较

1. 设计和使用：Pinia 提供了更简洁和灵活的 API，使得状态管理更加直观和容易理解。Pinia 的 store 定义更为简单，对 TypeScript 支持更友好。

2. 模块化：虽然 Vuex 也支持模块化，但 Pinia 的模块化设计更为简洁，不需要额外的命名空间处理。

3. TypeScript 支持：Pinia 从一开始就考虑了 TypeScript 的支持，提供了更好的类型推断和装饰器支持。

4. 响应式：Pinia 使用 Vue 3 的 Composition API，提供了更好的响应式支持和性能。

5. 生态系统和社区：Vuex 由于更早被引入 Vue 生态，有着更成熟的社区和插件支持。但随着 Vue 3 的普及，Pinia 正在迅速成长，获得更多的社区支持和认可。