全文参考pinia中文官网,对官网的知识作了一个小笔记,仅供自用。并且结合公司实际项目进行整理与学习,请各位小伙伴指正~
pinia中文官网链接:http://pinia.cc/docs/introduction.html
Pinia介绍
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态
安装方式
yarn add pinia
# or with npm
npm install pinia
Vue3 创建一个 pinia 实例(根存储)并将其作为插件传递给应用程序:
//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
//引入pinia
import { createPinia } from 'pinia'
app.use(createPinia())
app.mount('#app')
如果您使用的是 Vue 2,您还需要安装一个插件并将创建的 pinia 注入应用程序的根目录:
//main.js
import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
el: '#app',
// other options...
// ...
// 请注意,可以在同一页面上的多个 Vue 应用程序中使用相同的 `pinia` 实例
pinia,
})
核心概念
//store/auth.js
import { defineStore } from 'pinia'
//defineStore() 的第一个参数是应用程序中商店的唯一 id
//defineStore() 的第二个参数接受两个不同的值:Setup 函数或 Options 对象。
export const useStore = defineStore('auth', {
// other options...
})
在实际项目中了解 ,如下图。
此图是Option Stores。与 Vue 的 Options API 类似,我们也可以传递带有 state、actions 和 getters 属性的 Options 对象。
Setup Stores
我们可以传入一个定义响应式属性和方法的函数,并返回一个带有属性和 我们要公开的方法。
export const useCounterStore = defineStore('counter', () => {
//ref() 成为 state 的属性
const count = ref(0)
const name = ref('Eduardo')
//computed() 变成 getters
const doubleCount = computed(() => count.value * 2)
//function() 变成 actions
function increment() {
count.value++
}
return { count, name, doubleCount, increment }
})
相比而言我更喜欢Option stores,感觉直观且易于上手。
状态 State
定义状态 State
使用state
重置状态 $reset()
您可以通过调用 authStore上的 $reset() 方法将状态 reset 到其初始值:
import {auth} from "@/store/auth";
const authStore = auth();
authStore.$reset()
可修改状态 (看不懂~~)
如果您希望能够写入这些状态属性(例如,如果您有一个表单),您可以使用 mapWritableState() 代替。 请注意,您不能传递类似于 mapState() 的函数:
import { mapWritableState } from 'pinia'
import { useCounterStore } from '../stores/counter'
export default {
computed: {
// 允许访问组件内部的 this.count 并允许设置它
// this.count++ 与从 store.count 中读取相同
...mapWritableState(useCounterStore, ['count'])
// 与上面相同,但将其注册为 this.myOwnName
...mapWritableState(useCounterStore, {
myOwnName: 'count',
}),
},
}
改变状态
除了直接用 authStore.count++ 修改 authStore,你还可以调用 $patch 方法。 它允许您使用部分“状态”对象同时应用多个更改:
authStore.$patch({
count: store.count + 1,
age: 120,
name: 'DIO',
})
但是,使用这种语法应用某些突变非常困难或代价高昂:任何集合修改(例如,从数组中推送、删除、拼接元素)都需要您创建一个新集合。 正因为如此,$patch 方法也接受一个函数来分组这种难以用补丁对象应用的突变:(看不懂哇~~)
authStore.$patch((state) => {
state.items.push({ name: 'shoes', quantity: 1 })
state.hasChanged = true
})
替换状态
您不能完全替换 authStore的状态,因为这会破坏反应性。 但是,您可以_patch it_:
// 这实际上并没有取代`$state`
authStore.$state = { count: 24 }
// 它在内部调用`$patch()`:
authStore.$patch({ count: 24 })
您还可以通过更改 pinia 实例的 state 来设置整个应用程序的初始状态。 这在 SSR 水合 期间使用。
pinia.state.value = {}
本来想一次性学完的,但是要想真正了解pinia,真的很费脑子,脑子不够用了,先缓缓吧~