vue3中的使用Pinia

Pinia:状态存储管理器，允许您跨组件/页面共享状态。vue2推荐使用vuex,vue3推荐使用pinia.

好处：

• 在不重新加载页面的情况下修改您的 Store
• 在开发时保持任何现有状态

地址：介绍 | Pinia 中文文档

一、安装  

首先要安装   pnpm install pinia    yarn add pinia   npm install pinia

在跟目录main.ts中引入。 创建一个 pinia（根存储）并将其传递给应用程序

如果您使用的是 Vue 2，您还需要安装一个插件并将创建的 pinia 注入应用程序的根目录。

import { createPinia } from 'pinia'

app.use(createPinia())

二、核心概念 

1.开始创建一个store

import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西

// 第一个参数是应用程序中 store 的唯一 id
export const useUser = defineStore('useUser', {
  // other options...
})

 store实例相当于一个容器，里面存放的有类似于data，计算属性，方法之类的东西。通过defineStore()方法定义，一般一个模块是一个 store文件，比如用户是一个，商品是一个等等，最后在一起导出使用。（一般没有分这么细，直接一个store）

import { defineStore } from 'pinia'

const useUser= defineStore('useUser', {
  // 推荐使用 完整类型推断的箭头函数
  state: () => {
    return {
      // 所有这些属性都将自动推断其类型
      counter: 1,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
})

2.state,访问state

const useUserdata= useUser()

1、直接访问

useUserdata.counter

2、重置状态

useUserdata.$reset()

3、改变状态

useUserdata.counter++

除了直接用 store.counter++ 修改 store，你还可以调用 $patch 方法。

useUserdata.$patch((state) => {
  state.isAdmin= false
  state.counter= 5
})

4、替换state

您可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态

useUserdata.$state = { counter: 666, name: 'Paimon' }

3.Getters 

Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

export const useUser= defineStore('useUser', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },

//其他写法：

doubleCount(state) {
     return state.counter * 2
},

在同一个Store里访问其他 getter ：通过 this 访问任何其他 getter

doubleCountPlusOne() {
      return this.doubleCount + 1
 },

访问其他 Store 的getter,要使用其他存储 getter，您可以直接在 better 内部使用它：

otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
  },

})

可以直接访问任何 getter 作为 store 的属性（与 state 属性完全一样）

const store = useStore()

store.doubleCount 

4.Actions

Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：