Персистентная обработка пинии в Vue3

Просто запишите процесс обучения пинии

1. Что такое Пиния?

   Pinia — это библиотека управления состоянием , основанная на Vue 3 . В отличие от Vuex в Vue 2, Pinia использует Composition API в Vue 3 , поэтому может лучше поддерживать TypeScript и более гибкое управление состоянием.

2. Каковы характеристики Пинии?

• Простой и удобный в использовании, его API разработан для Composition API, поэтому вы можете легко использовать новые функции Vue 3.
• Поддерживает TypeScript и предоставляет строгие определения типов для обнаружения ошибок во время компиляции.
• Поддержка механизма плагинов, вы можете легко расширить его функциональность.
• Поддерживается несколько экземпляров хранилища, и каждый экземпляр хранилища может иметь свое собственное состояние и поведение.
• Поддержите постоянное хранилище, вы можете сохранить данные в магазине в локальном хранилище, чтобы к ним можно было получить доступ после обновления страницы.

Как взять

1. установить пинию

yarn add pinia
#或者使用 npm
npm install pinia

2. Настройте в файле main.ts/js

import { createApp } from 'vue'
++ import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
++ const pinia = createPinia()
++ app.use(pinia)
app.use(router)

app.mount('#app')

Добавьте функцию createPinia() из Pinia в файл main.ts/js.

import { createPinia } from 'pinia'

И передайте его приложению с помощью createApp(App).use().

const pinia = createPinia()
app.use(pinia)

3. Создание магазина Pinia В вашем приложении вам необходимо создать магазин Pinia для управления своим состоянием. Вы можете использовать функцию createPinia() для создания экземпляра Pinia.

   Создайте новый файл /stores/counter.js в каталоге src.

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式写法
// export const useCounterStore = defineStore(
//   "counter",

//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     actions: {
//       increment() {
//         this.count++;
//       },
//     },
//   }
// );

// 组合式写法 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value++;
    }
    return {
      count,
      increment
    };
  },
  {
  //...更多配置
  }
);

Поскольку Pinia поддерживает Composition API, она обычно использует метод композиции. В приведенном выше коде defineStore имеет три параметра:

• Первый параметр: storeName Тип: String Описание: Название магазина. Определите уникальность магазина

• 第二个参数：setup 类型: () => StoreDefinition<State, Getters, Actions, StoreOptions>
  描述：类似Vue组件中setup()函数

• 第三个参数：storestoreOptions（可选） 类型：StoreOptions 描述：一个对象，包含一些 store 的选项

简单来说 第一个参数像是一个id 给某个store绑定上，给这个仓库唯一化。 第二个参数规定了仓库里面的初始值以及变化值。第三个参数 是个配置选项，例如 persist（是否启用持久化存储）、devtools（是否启用开发工具）等。 最后使用export 抛出useCounterStore 方法

4. Pinia的使用 在组件中使用Pinia

<script setup>
++ import { useCounterStore } from '@/stores/counter'
++ const counter = useCounterStore()
++ const clickHanlde=()=>{
++  counter.increment()
++ }
</script>
<template>
  <!-- 直接从 store 中访问 state -->
++  <div>Current Count: {{ counter.count }}</div>
++  <button @click="clickHanlde">加1</button>
</template>
<style scoped>

</style>

从刚才定义的counter.js文件里引入useCounterStore()方法 打印了一下 发现控制台可以正常拿到响应式数据

并且定义一个变量存储。同时定义一个点击事件的函数

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const clickHanlde=()=>{
  counter.increment()
}

在这个 clickHandle函数里面 使用counter中我们定义的action 叫做"increment"的方法

使用 template模板写页面

<template>
  <!-- 直接从 store 中访问 state -->
  <div>Current Count: {{ counter.count }}</div>
  <button @click="clickHanlde">增加</button>
</template>

在模板里面使用{{ counter.xxx }}可以正常取到我们放入pinia的数据 此时 当点击按钮“加1”时 store里面的count会在原来的基础上++

我们发现此时count 已经增加了

此时刷新浏览器，发现count还是为0，浏览器并没有替我们将count 放在 储存空间内。

解决方案：由于pinia里没有自带的持久化存储，所以我们需要使用要持久化存储的插件 pinia-plugin-persistedstate npm地址：pinia-plugin-persistedstate 文档入口:pinia-plugin-persistedstate

1. Установите плагин pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate
#或者使用 npm
yarn add pinia-plugin-persistedstate

2. После завершения установки его необходимо настроить в файле main.ts/js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
++ import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)
const pinia = createPinia()
++ pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)

app.mount('#app')

PiniaPluginPersistedstate вводится и передается приложению с помощью app.use().

3. Наконец, добавьте параметры конфигурации в магазин.

import { ref, computed } from "vue";
import { defineStore } from "pinia";


// 选项式写法
// export const useCounterStore = defineStore(
//   "counter",

//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     // 也可以这样定义
//     // state: () => ({ count: 0 })
++//     persist: true,
//     actions: {
//       increment() {
//         this.count++;
//       },
//     },
//   }
// );

// 组合式写法 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value++;
    }
    return {
      count,
      increment
    };
  },
  {
++    persist: true,
  },

);

То есть пункт конфигурации в третьем параметре легендарного defineStore

На этом этапе pinia можно использовать как обычно для хранения данных, а также завершила постоянную настройку.