Pinia学习
Vue3中 使用
安装
yarn add pinia
# 或者使用 npm
npm install pinia
使用
main.js中引入并注册
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './style.css'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
src下创建store文件夹-用于管理state
// 命名规范
// use + 逻辑名 || 业务名 + store
// useCounterStore
Store
创建
import { defineStore } from 'pinia'
// defineStore
// 参数一是一个id 参数二是配置项 state getters actions
export const useCounterStore = defineStore('counter', {
state: () => {
return {
count: 0
}
},
getters: {
doubleCount: () => state.count * 2
},
actions: {
increment () {
this.count++
},
decrement () {
this.count--
}
}
})
Store的 使用
<script setup>
import { useCounterStore } from './store/useCounterStore'
import { storeToRefs } from 'pinia'
// store 是一个用reactive 包裹的对象
// 这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构：
const store = useCounterStore()
// 想结构后保持其响应式 就必须借用 storeToRefs()
const { count } = storeToRefs(store)
console.log('我创建的第一个仓库', store);
console.log('仓库结构', count); // ref包裹的对象
</script>
Store知识点
- defineStore 创建仓库
参数1 id 参数2 配置项
返回值 reactive包裹的响应式对象
引入 ==》 调用 ==》 结构
import { useCounterStore } from './store/useCounterStore'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)
解构时 直接结构调用后的返回值（store）得到的是不具备响应式的数据
需要通过storeToRefs () 包裹 store 解构出来的数据才具备响应式 （ref）
State
创建
export const useCounterStore = defineStore("counter", {
state: () => {
return {
num: 0,
count:0
};
}
})
访问状态
默认情况下，您可以通过 store 实例访问状态来直接读取和写入状态：
<script setup>
import { useCounterStore } from './store/useCounterStore'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)
console.log('我创建的第一个仓库', store);
console.log('仓库结构', count); // ref包裹的对象
重置状态
原理
调用的$patch
const $reset = isOptionsStore
? function $reset(this: _StoreWithState<Id, S, G, A>) {
const { state } = options as DefineStoreOptions<Id, S, G, A>
const newState = state ? state() : {}
// we use a patch to group all changes into one single subscription
this.$patch(($state) => {
assign($state, newState)
})
}
: /* istanbul ignore next */
DEV
? () => {
throw new Error(
标签：const,counter,state,pinia,import,store From： https://www.cnblogs.com/rlwan/p/18032181