Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate，异步Action，storeToRefs()，修改State的 $patch，$reset

什么是状态管理 ？

全局状态 Store (如 Pinia) 是一个保存状态和业务逻辑的实体，与组件树没有绑定，有点像一个永远存在的组件，每个组件都可以读取和写入它。

三大核心概念

• state 属性 —— 相当于组件中的 data
• getter 计算属性 —— 相当于组件中的 computed
• action 操作属性的行为 —— 相当于组件中的 methods

什么时候使用 Store?

只有多个组件（父子组件除外，至少是兄弟组件）都需要使用的数据，才应使用 Store。

若使用组合式函数能实现，或者应该只是组件的本地状态的数据，就不应使用 Store。

为什么使用 Pinia ？

更简单易用，官方推荐。

安装 Pinia

通常创建 vue3 项目时，选择安装 Pinia 就会自动集成。

但若目前项目里没有，则按如下流程操作

1. 安装 Pinia

npm i pinia

2. 导入使用 Pinia

src/main.ts

import { createPinia } from 'pinia'

app.use(createPinia())

Pinia 的使用

以全局状态 counter 为例：

1. 定义状态管理器

• state 属性用 ref()
• getters 用 computed()
• actions 用 function()

新建文件 src/stores/counter.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

// 定义状态管理器生成函数 useCounterStore，第一个参数为状态管理器的名称 
export const useCounterStore = defineStore('counter', () => {
  // State -- 定义目标状态 count，默认值为 0
  const count = ref(0)
  // Getter -- 定义自动计算的状态，它随目标状态 count 的变化，会自动生成新的值
  const doubleCount = computed(() => count.value * 2)
  // Action -- 定义操作目标状态的方法，用于修改目标状态
  function increment() {
    count.value++
  }

  // 返回定义的 State，Getter，Action
  return { count, doubleCount, increment }
})

模块化

stores 中的每一个状态管理器定义文件，就是一个模块。

根据业务需要，将同类型的状态放在一个状态管理器中进行管理，文件名为模块名.ts，如 counter.ts

状态管理器生成函数的命名规则【推荐】

以 use 开头，Store 结尾，以状态管理器 counter 为例，状态管理器生成函数的名称为 useCounterStore

2. 使用状态管理器

<script setup lang="ts">
// 导入状态管理器
import { useCounterStore } from '@/stores/counter'
// 生成状态管理器实例
const counter = useCounterStore()
</script>

<template>
  <div>
    <!-- 使用状态管理器中的 State  -->
    <p>count: {{ counter.count }}</p>
    <!-- 使用状态管理器中的 Getter  -->
    <p>双倍的 count: {{ counter.doubleCount }}</p>
    <!-- 使用状态管理器中的 Action  -->
    <button @click="counter.increment">count+1</button>
  </div>
</template>

Action 中支持异步获取数据

src/stores/user.ts

import { ref } from 'vue'
import type { Ref } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'

interface userInfo {
  id: number
  name: String
}

export const useUserStore = defineStore('user', () => {
  const userList: Ref<userInfo[]> = ref([])

  // Action -- 支持异步
  async function getList() {
    try {
      const res = await axios.get('http://jsonplaceholder.typicode.com/users')
      userList.value = res.data
    } catch (error) {
      return error
    }
  }

  return { userList, getList }
})

src/test.vue

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const User = useUserStore()
</script>

<template>
  <div>
    <ul>
      <li v-for="item in User.userList" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="User.getList">获取用户列表</button>
  </div>
</template>

解构时使用 storeToRefs() 保持响应式

src/stores/login.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'
import axios from 'axios'

export const useLoginStore = defineStore('login', () => {
  const ifLogin = ref(false)
  const userInfo = ref({})

  async function login() {
    ifLogin.value = true

    try {
      const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
      userInfo.value = res.data
    } catch (error) {
      return error
    }
  }

  function logout() {
    ifLogin.value = false
    userInfo.value = {}
  }

  return {
    ifLogin,
    userInfo,
    login,
    logout
  }
})

src/test.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useLoginStore } from '@/stores/login'

const LoginStore = useLoginStore()
// store 中的 State 需用 storeToRefs() 处理后，才能在解构时保持响应式
const { ifLogin, userInfo } = storeToRefs(LoginStore)
// store 中的 Action 可以直接解构
const { login, logout } = LoginStore
</script>

<template>
  <div>
    <p>ifLogin:{{ ifLogin }}</p>
    <p>userInfo:{{ userInfo }}</p>

    <button v-if="ifLogin" @click="logout">登出</button>
    <button v-else @click="login">登录</button>
  </div>
</template>

修改 State 的三种方式

方式一 : 使用 Action【推荐】

比较规范的写法，是将所有对 store 中 State 的修改都用 Action 实现，比如

// src/stores/login.ts 中
function logout() {
  ifLogin.value = false
  userInfo.value = {}
}

页面中调用触发修改

import { useLoginStore } from '@/stores/login'
const LoginStore = useLoginStore()
const { login, logout } = LoginStore

<button @click="logout">登出</button>

方式二 : 使用 $patch

页面中使用 $patch 触发修改

import { useLoginStore } from '@/stores/login'
const LoginStore = useLoginStore()

function logout() {
  LoginStore.$patch((state) => {
    state.ifLogin = false
    state.userInfo = {}
  })
}

方式三 : 直接修改【不推荐】

从代码结构的角度考虑，全局的状态管理不应直接在各个组件中随意修改，而应集中在 action 中统一方法修改

import { useLoginStore } from '@/stores/login'
const LoginStore = useLoginStore()

function logout() {
  LoginStore.ifLogin = false
  LoginStore.userInfo = {}
}

自行实现 $reset() 方法

用选项式 API 时，可以通过调用 store 的 $reset() 方法将 state 重置为初始值。

但在组合式 API 中，需要自行实现 $reset() 方法，如

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  
  // $reset 在组合式 API 中需自行实现
  function $reset() {
    count.value = 0
  }

  return { count, $reset }
})

状态持久化（避免刷新页面后状态丢失）

1. 安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

2. 导入启用

src/main.ts

import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

const pinia = createPinia()

pinia.use(
  createPersistedState({
    // 所有 Store 都开启持久化存储
    auto: true
  })
)

app.use(pinia)

配置关闭持久化

针对需要关闭持久化的 store ，添加配置

  {
    persist: false
  }

详细范例如下：src/stores/counter.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increment() {
      count.value++
    }

    return { count, doubleCount, increment }
  },
  // 关闭持久化
  {
    persist: false
  }
)

当然，也可以默认全局不启用持久化

// src/main.ts 中
pinia.use(
  createPersistedState({
    auto: false
  })
)

只针对部分 store 开启持久化

  // 开启持久化（目标 store 中）
  {
    persist: true
  }

更多高级用法，可以参考插件的官网
https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

选项式 API 的写法和其他用法请参考官网

https://pinia.vuejs.org/zh/