当前位置：首页 > news >正文

【VUE3】Pinia

news 2025/7/26 21:09:17

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 使用仓库数据

<script setup>
// 导入仓库
import { usecountStore } from '@/store/count'
// 获取数据
const count = usecountStore()
</script>

<template>
  <div>
    number1: {{ count.number1 }}
  </div>
  <div>
    doubleNumber1: {{ count.doubleNum }}
  </div>
  <button @click="count.addNum">+1</button>
  <button @click="count.subNum">-1</button>
</template>

<style scoped>

</style>

2.3 解构响应式数据

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

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

<script setup>

import { storeToRefs } from 'pinia'
const store = useCounterStore()

// `name` 和 `doubleCount` 是响应式的 ref
// 同时通过插件添加的属性也会被提取为 ref
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性

const { name, doubleCount } = storeToRefs(store)

// 作为 action 的 increment 可以直接解构

const { increment } = store

</script>

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    //只需要配置这里
})

查看全文

http://www.dtcms.com/a/106758.html