【VUE3】Pinia

目录

0前言

1 手动添加Pinia

2 创建与使用仓库（Setup Store 组合式）

2.1 创建仓库

2.2 使用仓库数据

2.3 解构响应式数据

3 持久化插件

---

0前言

官网：Pinia | The intuitive store for Vue.js

---

1 手动添加Pinia

上手之后，可以通过create-vue脚手架勾选Pinia快速添加

第一步：安装Pinia

在没有Pinia的相目中，执行以下命令

npm i pinia

第二步：在main.js中添加pinia

此处为VUE3的操作，VUE2的操作请见官方文档：开始 | Pinia

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

const pinia = createPinia() // 创建Pinia实例
const app = createApp(App) // 创建根实例

app.use(pinia) // pinia插件的安装配置
app.mount('#app') // 视图的挂载

也可以用链式写法：

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

const pinia = createPinia()

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

---

2 创建与使用仓库（Setup Store 组合式）

另一种方式（Option Store 选项式）见 定义 Store | Pinia 

2.1 创建仓库

你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
(比如 `useUserStore`，`useCartStore`，`useProductStore`)
第一个参数是你的应用中 Store 的唯一 ID

// store/count.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'


export const usecountStore = defineStore('count', () => {

  // ———————————————————声明数据 state—————————————————————

  const number1 = ref(1)


  // ———————————————————声明方法 actions—————————————————————

  const addNum = () => {
    // 同步
    number1.value++
  }

  const subNum = () => {
    // 异步 - 模拟异步，1s后操作
    setTimeout(() => {
      number1.value--
    }, 1000)
  }


  // ———————————————————声明计算属性—————————————————————

  const doubleNum = computed(() => number1.value * 2)
  
  // ———————————————————导出属性与方法—————————————————————

  return {
    number1,
    addNum,
    subNum,
    doubleNum
  }
})

---

2.2 使用仓库数据

---

2.3 解构响应式数据

直接解构仓库中的响应式数据时，会得到非响应式的数据，需要用pinia中的 storeToRefs() 方法

注意：actions不需要！因为我们并不会改方法

---

3 持久化插件

官网：Pinia Plugin Persistedstate

vue2持久化插件：GitHub - robinvdvleuten/vuex-persistedstate

第一步：安装插件 pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

第二步：在main.js中使用

import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))

第三步：在仓库中配置

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

export const useCounterStore = defineStore('counter', () => {
  ...
  return {
    count,
    doubleCount,
    increment
  }
}, {
  persist: true    //只需要配置这里
})