vue3使用 Pinia及 Pinia数据持久化存储

安装使用Pinia

参考文档：https://pinia.vuejs.org/zh/core-concepts/
用你喜欢的包管理器安装 pinia：

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

创建一个 pinia 实例 (根 store) 并将其传递给应用：
在main.ts 或者main.js 中引入并挂载到根实例

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

const pinia = createPinia()
const app = createApp(App)

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

定义store

src目录下新建store文件夹，创建user.ts文件并写入
Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字，
defineStore() 的第二个参数可接受两类值：Setup 函数或 Option 对象。

state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。
actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

第一种Options式写法：

import {
   
    defineStore } from 'pinia'

// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', {
   
   
  state: () => ({
   
    count: 0, name: 'Eduardo' }),
  getters: {
   
   
    doubleCount: (state) => state.count * 2,