官方网址

官方网址:pinia.vuejs.org/

中文网:pinia.web3doc.top/

安装

yarn

yarn add pinia

npm

npm install pinia

介绍

pinia是vue的存储库，它允许您跨组件/页面共享状态。

使用

在main.js中引入

// 引入pinia
import { createPinia } from 'pinia'
//实例化pinia
const pinia = createPinia()
//应用以插件形式挂载pinia实例
app.use(pinia)

开发store中的模块

user.js

//store是使用defineStore来定义
import { defineStore } from 'pinia'


 // 传入2个参数，定义仓库并导出
 // 第一个参数是应用程序中 store 的唯一 id
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
  // state 类似组件的data选项，函数形式返回对象
  state: () => {
    return {
      msg: 'hello world!',
      counter: 0
    }
  },
  getters: {},
  actions: {}
})

在组件中使用

import { mainStore } from '@/store/user.js'
//实例化仓库
const store = mainStore();

获取、改变store的值

//导入状态仓库
import { mainStore } from '@/store/user.js'
//使普通函数变成响应式函数
import { storeToRefs } from 'pinia'
//实例化仓库
const store = mainStore();
//解构并使数据变成响应式
const {counter, msg} = storeToRefs(store)
//修改数据
const countHandler = () => {
    counter.value++
}

改变state值的方式

方法一：

1. 使用storeToRefs变为相应数据，然后直接操作 import { storeToRefs } from 'pinia'

2. 使用$patch。store提供$patch方法，接受对象作为参数更新store对象(对象形式) const {counter, msg} = storeToRefs(store) const addHandler = () => { store.$patch({ counter: counter.value + 1 }) }

3. 使用$patch（函数形式），$patch也可传入一个函数，函数参数为state状态