Pinia安装配置

Pinia 是Vue 的存储库，它允许您跨组件/页面共享状态。pinia使用的是 Composition API，所以对熟练使用vue3的小伙伴来说还是挺友好的，那vue2的小伙伴不就要开始方了，莫方！官方文档上对必要的地方和关键的细节都做了vue2的注释，有兴趣小伙伴，可以到官方链接细看。

安装

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

注意

1. 如果您的应用使用 Vue 2，您还需要安装组合 API：@vue/composition-api。

配置使用

main.js(vue3)

import { createPinia } from 'pinia'

app.use(createPinia())

main.js(vue2)

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // 其他选项...
  // ...
  // 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
  // 同一个页面
  pinia,
})

基本示例

// 引入 定义store的api
import { defineStore } from 'pinia'
export function testStore = defineStore('test',{
  state:{
    id: 1,
    name: 'test'
  },
 getters:{
    getById:(state) =>{
      return state.id
    }
  },
  actions: {
      editName(){
      this.name = '昵称：'+this.name
   }
  }
})

相应的API详解，以及具体的使用，教程等，建议到官网学习研究，🔜 Pinia