Vue3下pinia的状态管理原理和具体使用示例

一、Pinia是什么？

Pinia在Composition API的设计背景下，以Vuex下一代的构想设计了新的Vue存储状态管理库；Pinia 是一个基于 Vue 3 的状态管理库，它提供了一个可组合的、类型安全的 API 来管理 Vue 应用程序的状态。

二、Pinia的特性

• 支持vue2选项式api和vue3组合式api写法
• Pinia没有mutations，只有：state、getters、actions
• Pinia分模块不需要modules(vuex分模块需要modules)
• TypeScript支持很好
• Pinia体积更小，性能更好
• Pinia可以在组件中直接修改state中的数据
• Pinia在actions中支持异步操作

三、Pinia在Vue3中的使用

首先，Vue3是Vue框架的最新版本，它带来了很多新的特性和改进，其中一个最重要的改进就是它的响应式系统变得更加高效和灵活。而pinia则是一个基于Vue3的状态管理库，它的设计理念是简单、轻量、可测试和可扩展。

在Vue3中，响应式系统的核心是通过ES6的“Proxy”代理实现响应，通过代理、反射等特性可以让我们更加方便地监视和拦截对象的属性访问和修改，从而实现了响应式的效果。而Pinia的工作原理主要是利用了Vue 3提供的reactive函数和watch函数。当状态存储中的状态发生变化时，Pinia会自动更新依赖于该状态的组件。在组件中，可以使用computed和watch函数来监听状态存储中的状态，当状态发生变化时，组件会自动更新。

具体来说，在pinia中，我们可以定义一个“store”，它是一个包含了一些状态和一些操作这些状态的方法的对象。在这个store中，我们可以使用Vue3的响应式系统来定义状态，比如：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在这个例子中，我们定义了一个名为“useCounterStore”的store，它包含了一个名为“count”的状态和一个名为“increment”的方法。我们可以通过“useCounterStore.count”来访问这个状态，通过“useCounterStore.increment()”来调用这个方法。

需要注意的是，在pinia中，所有的状态都是只读的，我们只能通过定义的方法来修改它们。这样可以确保状态的一致性和可追溯性。

四、如何在Vue3中使用pinia进行状态管理

首先，我们需要安装pinia：

npm install pinia

然后，在我们的Vue应用中，我们需要创建一个名为“pinia”的实例，并在根组件中把它挂载到Vue实例上，这样我们的应用的所有组件就可以使用它了。具体的代码如下：

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

const pinia = createPinia()
const app = createApp(App)

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

接着，我们就可以开始定义我们的store了。我们可以通过“defineStore”函数来定义一个store，它接受一个包含了store的id、state和actions的对象。其中，id是store的唯一标识符，state是一个函数，返回一个包含了store的状态的对象，actions是一个包含了store的操作状态的方法的对象。具体的代码如下：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

在store中，我们可以使用Vue3的响应式系统来定义状态，并且通过定义的方法来操作这些状态。需要注意的是，在pinia中，所有的状态都是只读的，我们只能通过定义的方法来修改它们。

最后，在我们的组件中，我们可以使用“useStore”函数来获取我们定义的store，并在组件中使用它。具体的代码如下：

import { useStore } from 'pinia'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const counterStore = useStore('counter')

    function handleClick() {
      counterStore.increment()
    }

    return {
      count: counterStore.count,
      handleClick
    }
  }
})

在这个例子中，我们使用“useStore”函数来获取我们定义的名为“counter”的store，并在组件中使用它。通过“counterStore.count”来获取store中的状态，通过“counterStore.increment()”来调用store中的方法。

五、pinia状态管理的高级用法

1. Getter/Setter函数

首先，pinia支持“getter”和“setter”函数，可以让我们更加灵活地定义状态的访问和修改方式。具体的代码如下：

import { defineStore } from 'pinia'

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

在这个例子中，我们定义了一个名为“count”的getter函数和一个名为“doubleCount”的getter函数，它们分别返回状态“_count”的值和它的两倍。我们可以通过“counterStore.count”和“counterStore.doubleCount”来获取它们的返回值。

2. Actions函数和异步支持

另外，pinia还支持“actions”函数，它们可以让我们更加细粒度地控制状态的修改和异步操作。具体的代码如下：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    _count: 0
  }),
  getters: {
    count: state => state._count,
    doubleCount: state => state._count * 2
  },
  actions: {
    increment() {
      this._count++
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this._count++
    }
  },
})

在这个例子中，我们定义了一个名为“increment”的“actions”函数和一个名为“incrementAsync”的异步“actions”函数，它们分别用来同步和异步增加状态“_count”的值。

3. Subscribe函数订阅状态变化

另外，pinia还支持“subscribe”函数，它可以让我们订阅状态的变化，并在状态变化时执行一些操作。具体的代码如下：

import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    _count: 0
  }),
  getters: {
    count: state => state._count,
    doubleCount: state => state._count * 2
  },
  actions: {
    increment() {
        this._count++
    }
  }
})

//****** subscribe ********
const counterStore = useCounterStore()
counterStore.subscribe(({ count }) => {
  console.log(`count is now ${count}`)
})

在这个例子中，我们使用“subscribe”函数来订阅状态的变化，并在状态变化时打印一条日志。

4. Pinia持久化存储

为什么要做持久化？因为数据一刷新就回到了初始化的状态，希望能够保持数据的长久存储

• 方式一：自己手动去写，使用localStorage或者sessionStorage
• 方式二：使用插件，这里主要讲的是方式二

插件的持久化存储默认走的是sessionStorage

安装插件

npm i pinia-plugin-persist --save

注册插件

import { createPinia } from 'pinia'
const store = createPinia()
import piniaPluginPersist from 'pinia-plugin-persist' // 引入持久化存储插件
store.use(piniaPluginPersist) // 使用插件
export default store

开启持久化

import { defineStore } from 'pinia'
export const user = defineStore({
    id: 'user',
    state: () => {
        return {
            nickName: '张三用户',
            age: 18
        }
    },
    actions: {
        changeAge(val) {
            this.age += val
        }
    },
    
    // 开启数据缓存 --- localStorage
    // 数据默认存在sessionStorage里，并且会以store的id作为key
    persist: {
        enabled: true,
        strategies: [{
            key: 'my_user',
            storage: localStorage,
            paths: ['age'] // 如果不写paths，默认当前模块全部做持久化存储，如果写了，表示数组内的state做持久化存储。大白话：这个模块只有age做持久化存储
        }]
    }
})

总的来说，pinia提供了非常多的高级用法，可以让我们更加灵活和细粒度地控制状态管理的行为。如果你需要更加复杂的状态管理功能，pinia是一个非常不错的选择。

参考：Pinia的使用_木森林哥哥