Persistence processing of pinia in Vue3

Simply record the process of learning pinia

1. What is Pinia?

   Pinia is a state management library based on Vue 3 . Unlike Vuex in Vue 2, Pinia uses the Composition API in Vue 3 , so it can better support TypeScript and more flexible state management.

2. What are the characteristics of Pinia?

• Simple and easy to use, its API is designed for the Composition API, so you can easily use the new features of Vue 3.
• Supports TypeScript and provides strong type definitions to catch errors at compile time.
• Support plug-in mechanism, you can easily extend its functionality.
• Multiple store instances are supported, and each store instance can have its own state and behavior.
• Support persistent storage, you can save the data in the store in local storage, so that it can still be accessed after the page is refreshed.

How to take

1. install pinia

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

2. Configure in the main.ts/js file

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')

Introduce Pinia's createPinia() function in the main.ts/js file

import { createPinia } from 'pinia'

And pass it to the application using createApp(App).use().

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

3. Creating a Pinia Store In your application, you need to create a Pinia store to manage your state. You can use the createPinia() function to create a Pinia instance

   Create a new /stores/counter.js file in the src directory.

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
    };
  },
  {
  //...更多配置
  }
);

Because Pinia supports the Composition API, it usually uses the composition method. In the above code defineStore has three parameters:

• The first parameter: storeName Type: String Description: The name of the store. Identify the uniqueness of the store

• 第二个参数：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. Install the pinia-plugin-persistedstate plugin

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

2. After the installation is complete, it needs to be configured in the main.ts/js file

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')

The piniaPluginPersistedstate is introduced and passed to the application using app.use().

3. Finally, add configuration options in the store

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,
  },

);

That is, the configuration item in the third parameter of the legendary defineStore

At this point, pinia can be used normally to store data for us and has also completed the persistent configuration