Store是一個(gè)保存：狀態(tài)隙轻、業(yè)務(wù)邏輯 的實(shí)體埠帕，每個(gè)組件都可以讀取、寫入它玖绿。
它有三個(gè)概念：state敛瓷、getter、action斑匪，相當(dāng)于組件中的：data呐籽、computed和methods。
1. 安裝 npm install pinia
2. 在 main.js 中配置
const app = createApp(App)
// 第一步：引入pinia
import {createPinia} from 'pinia'
// 第二步：創(chuàng)建pinia
const pinia = createPinia()
// 第三步：安裝pinia
app.use(pinia)
app.mount('#app')
3. 創(chuàng)建文件
- 選項(xiàng)式
// store/count.js
import { defineStore } from 'pinia'
export const useCountStore = defineStore('count', {
state() {
return {
sum: 6,
name: 'Zs'
}
},
actions: {
increment(value) {
this.sum = value;
}
},
getters: {
nameUpperCase() { return this.name.toUpperCase() }, // 大寫
nameLowerCase: state => state.name.toLowerCase(), // 小寫(簡(jiǎn)寫)
}
})
- 組合式
import { defineStore } from 'pinia'
import { computed, ref } from 'vue';
export const useCountStore = defineStore('count', () => {
let sum = ref(16);
let name = ref('Zs');
const increment = (value) => {
sum.value = value
}
const nameUpperCase = computed(() => name.value.toUpperCase())
return { sum, name, increment, nameUpperCase }
})
4. 讀取數(shù)據(jù)
<template>
{{countStore.sum}} - {{countStore.nameUpperCase}} - {{countStore.nameLowerCase}}
<el-button @click="handleClick">點(diǎn)我修改sum</el-button>
</template>
<script setup>
import { useCountStore } from "@/store/count";
const countStore = useCountStore()
</script>
5.修改數(shù)據(jù)
- 第一種修改方式：直接修改
countStore.sum += 1
- 第二種修改方式：批量修改
countStore.$patch({
sum: 18,
name: 'ls'
})
- 第三種修改方式：借助
action修改（action中可以編寫一些業(yè)務(wù)邏輯）
countStore.increment(20);
6. storeToRefs
如果解構(gòu)
store中的數(shù)據(jù)秤标，需要使用storeToRefs包裹绝淡，否則不是響應(yīng)式
借助storeToRefs將store中的數(shù)據(jù)轉(zhuǎn)為ref對(duì)象，方便在模板中使用苍姜。
pinia提供的storeToRefs只會(huì)將數(shù)據(jù)做轉(zhuǎn)換牢酵，而Vue的toRefs會(huì)轉(zhuǎn)換store中數(shù)據(jù)。
<template>
{{sum}}
<el-button @click="handleClick">點(diǎn)我修改sum</el-button>
</template>
<script setup>
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
const countStore = useCountStore()
const { sum } = storeToRefs(countStore) // 不使用storeToRefs 解構(gòu)出來(lái)的sum不是響應(yīng)式數(shù)據(jù)
const handleClick = () => {
countStore.sum += 1
}
</script>
7. $subscribe
通過 store 的
$subscribe()方法偵聽state及其變化
countStore.$subscribe((mutate, state) => {
console.log('countStore', mutate, state)
})
