Pinia 是新一代的状态管理器,在 Vue3的项目中使用很火。 Pinia文档

为 JS 用户提供适当的 TypeScript 支持或 autocompletion
足够轻量
去除 mutations，只有 state，getters，actions
actions 支持同步和异步
没有模块嵌套，只有 store 的概念，store 之间可以自由使用
无需手动添加 store，一旦创建便会自动添加
dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和更容易的调试
热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能
服务器端渲染支持

安装

pnpm install pinia -S

创建 Store

新建 src/store 目录并在其下面创建 index.ts，导出 store

import { createPinia } from 'pinia'
const store = createPinia()
export default store

在 main.ts 中引入并使用。

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)

State

定义State

在 src/store 下面创建一个user.ts

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user', // id必填，且唯一
  state: () => {
    return {
      name: 'Hello Vue3'
    }
  }
})

获取 state

<template>
  <div>{{ userStore.name }}</div>
   <!--<div>{{ name }}</div>-->
</template>

<script setup lang="ts">
    import { useUserStore } from '@/store/user'
    const userStore = useUserStore()
    // computed 获取
    // const name = computed(() => userStore.name)

    // state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 **storeToRefs**。
    // import { storeToRefs } from 'pinia'
    // const { name } = storeToRefs(userStore)
</script>

修改 state

不建议 userStore.name = 'Pinia'
建议通过 actions 去修改 state，action 里可以直接通过 this 访问。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: 'Hello Vue3'
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})

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

    const userStore = useUserStore()
    userStore.updateName('Hello Pinia')
</script>

Getters

export const useUserStore = defineStore({
 id: 'user',
 state: () => {
   return {
     name: 'Hello Vue3'
   }
 },
 getters: {
   fullName: (state) => {
     return state.name + 'Pinia'
   }
 }
})
// 使用
userStore.fullName

Actions

异步 action

action支持async/await

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(count, passWorld) {
      const { data } = await api.login(count, passWorld)
      return data
    }
  }
})

action 间相互调用

action 相互调用，直接用 this 访问即可。

 export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(count, passWorld) {
      const { data } = await api.login(count, passWorld)
      this.userData(data) // 调用另一个 `action` 的方法
      return data
    },
    userData(data) {
      console.log(data)
    }
  }
})

在 action 里调用其他 store 里的 action ，引入对应的 store 后即可访问其内部的方法。

import { useAppStore } from './index'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(count, passWorld) {
      const { data } = await api.login(count, passWorld)
      const appStore = useAppStore()
      appStore.userData(data) // 调用 index store 里的 action 方法
      return data
    }
  }
})

export const useAppStore = defineStore({
  id: 'index',
  actions: {
    userData(data) {
      console.log(data)
    }
  }
})

数据持久化

插件 pinia-plugin-persist 可以辅助实现数据持久化功能。

安装

pnpm i pinia-plugin-persist --save

使用

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

接着在对应的 store 里开启 persist 即可。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
      name: 'Hello Vue3'
  },
  // 开启缓存 全部缓存state数据
  persist: true
})

数据默认存在 localStorage 里，并且会以 store 的 id 作为 key。

自定义 key

也可以在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage。

persist: { 
    key: 'my-custom-key', 
    storage: sessionStorage,
},

持久化部分 state

默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。

state: () => {
    name: 'Hello Vue3',
    age: 3,
    version: '3.2.37'
},

persist: [
  {
     paths: ['name','age'],  // name为state的其中一条数据
     storage: localStorage, // 或者 sessionStorage
  }
]

我们只持久化 name 和 age，并将其改为localStorage, 而 version 不会被持久化，页面刷新时将会丢失，重新回到初始状态，而 name 和 age 则不会。

新一代的Vue3 状态管理工具 Pinia

安装