【pinia的使用】

1.pinia理解

是一个Vue状态管理工具，vue2推荐的状态管理工具是vuex
vue3推荐的状态管理工具是pinia。pinia去除了vuex中Mutations和Actions只剩下三大核心，而且相比于vuex，pinia对于typescript的支持性更好

2.基本配置和使用

在vue3项目中安装pinia

npm install pinia

先导入pinia
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

2.创建js文件 ↓↓↓

import { defineStore } from "pinia";

export const useStore = defineStore({
  persist: true,
  id: "counter",
  state: () => ({
    flag: false,
  }),
  getters: {},
  actions: {
    add: () => {
      console.log(2);
    },
  },
});

3.组件使用

import { useStore } from "./stores/counter"; 组件引入
const store = useStore();
<template>
<!-- 直接用 -->
  {{ store.flag }}
</template>

3.数据持久化

插件 pinia-plugin-persist 可以辅助实现数据持久化功能。

npm i pinia-plugin-persist --save 安装

//min.js文件
import { createPinia } from 'pinia'
//刷新数据丢失问题
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia();
store.use(piniaPluginPersistedstate);

app.use(store);

app.use(router);

app.mount("#app");

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。

//自定义配置
//数据持久化
import { defineStore } from "pinia"
export const useCounterStore = defineStore({
persist: {
  enabled: true,//开启数据持久化
  strategies: [
    {
      key: 'like',//给一个要保存的名称
      storage: localStorage,//sessionStorage / localStorage 存储方式
    }
  ]
}