写在前面

状态管理在现代前端中扮演着重要的角色。在Vue的生态系统中，Vuex状态管理库使用它的人是极多的。然而随着pinia的出现，它提供了一种全新的方式来进行状态管理，而且它备受官方的推崇。本文将带你探索从Vuex到Pinia如何强化状态管理，为什么pinia这么受推崇。

Vuex

是什么？

Vuex是一个专门为Vue.js应用程序开发的状态管理库。它被设计用于解决在大型Vue.js应用中组件之间共享状态的问题。Vuex基于Flux架构模式，通过集中管理应用程序的状态，使得状态的变化和响应变得可预测和可追踪。

核心概念

State

用于存储应用程序的共享状态，类似于组件中的data属性。

用法：

import { createStore } from 'vuex'

const store = createStore({
  state() { // 仓库中的数据源
    return {
      count: 2
    }
  }

Mutations

用于修改状态的方法。只能进行同步操作，用于确保状态变化的可追踪性。

用法：

 mutations: { // 所有修改数据源的方法都应该放在mutations里面
    add(state, n) {
      state.count += n
    }
  }

Actions

类似于Mutations，但可以进行异步操作。它们触发Mutations来修改状态。

用法：

 actions: { // 触发mutations中的方法
    addAction(context, num) {
      context.commit('add', num)
    }
  }

里面可以进行异步操作，但是异步操作我们可以不写在里面，看下面代码：

 $.ajax({
    url: 'xxxx',
    success() {
      store.commit('add', xxx)
    }
  })

Modules

允许将Vuex的状态分割为多个模块，每个模块拥有自己的state、mutations、actions和getters，使得大型应用的状态管理更加灵活和可维护。

Pinia

是什么？

Pinia是一个Vue.js状态管理库，专为Vue 3应用程序设计。它提供了一种简单、直观和可扩展的方式来管理应用程序的状态。Pinia提供了一种类似于Vuex的方式来共享状态，并通过响应式机制实现状态的自动更新和反应。

基本用法

1. 安装Pinia：使用npm或yarn安装Pinia库。

npm install pinia
// 或
yarn add pinia

2. 创建Pinia实例

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

createApp(App) .use(pinia).mount('#app')

3. 定义状态模块,状态模块类似于Vuex中的模块，用于组织和管理相关的状态、actions和getters。

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
  getters: {
    doubleCount() {
      return this.count * 2
    },
  },
})

4. 接下来就可以在组件中使用pinia库了

Pinia如何简化和优化状态管理流程

Pinia通过提供简单、直观和可扩展的状态管理方案来简化和优化状态管理流程。

1. 基于Composition API的灵活性：开发者可以使用函数式的方式定义状态、、actions和getters，并在组件中使用它们。这种基于函数的组合方式可以提高代码的可读性和可维护性。
2. 响应式数据结构和更新机制:Pinia可以追踪状态的变化并自动更新相关的组件。这样，开发者不需要手动管理状态的变化和组件的重新渲染，减少了开发的复杂性。
3. 性能更佳：重性能优化，并在一些方面采用了不同的实现策略，如更灵活的更新机制。
4. 插件系统的灵活性：插件系统使得状态管理的功能扩展变得简单，可以根据应用程序的需求进行定制。

小结

Vuex是一个成熟和广泛使用的状态管理库，适用于大多数Vue项目，现在很多企业还是在用Vuex。Pinia是一个新兴的库，它提供了更强大的类型推断和类型安全性，未来一定是属于它的天下。