文章目录

• 1. 介绍
• 2. Pinia 和 Vuex
• 3. 安装和基本使用
• 4. pinia修改数据状态
• 5. pinia持久化处理
• 6. 自定义插件

1. 介绍

它是2019 年 11 月对于新版本的vue提供的组合Api进行的尝试，它可以很好的集合vue新的api方法，且还很好的支持ts的写法，Pinia已经被纳入官方代码仓库中，也可以理解为Pinia为最新版本的vuex5。

2. Pinia 和 Vuex

• Vuex：namespaced State、Gettes、Mutations(同步)、Actions(异步)
• Pinia： State、Gettes、Actions(同步异步都支持)

Vuex 当前最新版是 4.x

• Vuex4 用于 Vue3
• Vuex3 用于 Vue2

Pinia 当前最新版是 2.x，它即支持 Vue2 也支持 Vue3。就目前而言 Pinia 是我们在vue3 项目中的首选，尤其是 TypeScript 的项目。

3. 安装和基本使用

安装：

yarn add pinia

使用：

1. 在入口文件进行初始化（main.js）：

   // 创建vue入口程序，由原来的类实例，变成现在的函数方式，为了更好在打包时优化代码
   import { createApp } from 'vue'
   // 根组件
   import App from './App.vue'
   // 路由
   import router from './router'import createGlobalComponent from './components'
   import globalProperties from './config/globalProperties'// pinia
   import { createPinia } from 'pinia'// pinia配置
   const pinia=createPinia()// 工作中常用写法：
   createApp(App).use(createGlobalComponent).use(globalProperties).use(router).use(pinia).mount('#app')
   

2. 创建 pinia 模块（pinia/film.js）：

   import { defineStore } from 'pinia'// 参数1：命名空间名称
   // 参数2：对象，配置 state getters actions
   const useFilmStore = defineStore('film',{state:()=>({num:100}),actions:{}
   })
   export default useFilmStore
   

3. 电影页面：

4. pinia修改数据状态

电影页面：

pinia/film.js：

import { defineStore } from 'pinia'// 参数1：命名空间名称
// 参数2：对象，配置 state getters actions
const useFilmStore = defineStore('film', {state: () => ({num: 100,arr: [1, 2, 3]}),actions: {addNum(n) {// 方案1// 同步this.num += n// 异步setTimeout(() => {this.num += n}, 1000)// 方案2this.$patch(state=>{state.num+=nstate.arr.push(Date.now())})},}
})
export default useFilmStore

5. pinia持久化处理

安装：

yarn add pinia-plugin-persistedstate@2

入口文件中导入：

// pinia中数据持久化
import { persistedState } from 'pinia-plugin-persistedstate'pinia.use(persistedState)

在pinia模块中使用：

import { defineStore } from 'pinia'// 参数1：命名空间名称
// 参数2：对象，配置 state getters actions
const useFilmStore = defineStore('film', {// 当前pinia模块中的所有的数据进行持久化处理// 默认使用的是 localStorage，且它存储在 localStorage 中的 key 的名称为命名空间名称[id名称]// persist: true,// 指定模块中要持久化的数据persist: {// 指定要持久化的 state 对象中的属性名称paths: ['num'],// 自定义localStorage中的key的名称，一般不修改key: 'filmstore',// 自定义使用localStorage还是sessionStorage存储介质storage: window.sessionStorage},state: () => ({num: 100,arr: [1, 2, 3]}),actions: {addNum(n) {// 方案1// 同步this.num += n// 异步setTimeout(() => {this.num += n}, 1000)// 方案2this.$patch(state => {state.num += nstate.arr.push(Date.now())})},}
})
export default useFilmStore

6. 自定义插件

Pinia中文文档：https://pinia.web3doc.top/core-concepts/plugins.html