Store是一个保存：状态、业务逻辑 的实体，每个组件都可以读取、写入它。
它有三个概念：state、getter、action，相当于组件中的：data、computed和methods。
1. 安装 npm install pinia
2. 在 main.js 中配置
const app = createApp(App)
// 第一步：引入pinia
import {createPinia} from 'pinia'
// 第二步：创建pinia
const pinia = createPinia()
// 第三步：安装pinia
app.use(pinia)
app.mount('#app')
3. 创建文件
- 选项式
// 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(), // 小写(简写)
}
})
- 组合式
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. 读取数据
<template>
{{countStore.sum}} - {{countStore.nameUpperCase}} - {{countStore.nameLowerCase}}
<el-button @click="handleClick">点我修改sum</el-button>
</template>
<script setup>
import { useCountStore } from "@/store/count";
const countStore = useCountStore()
</script>
5.修改数据
- 第一种修改方式：直接修改
countStore.sum += 1
- 第二种修改方式：批量修改
countStore.$patch({
sum: 18,
name: 'ls'
})
- 第三种修改方式：借助
action修改（action中可以编写一些业务逻辑）
countStore.increment(20);
6. storeToRefs
如果解构
store中的数据，需要使用storeToRefs包裹，否则不是响应式
借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。
pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据。
<template>
{{sum}}
<el-button @click="handleClick">点我修改sum</el-button>
</template>
<script setup>
import { useCountStore } from "@/store/count";
import { storeToRefs } from "pinia";
const countStore = useCountStore()
const { sum } = storeToRefs(countStore) // 不使用storeToRefs 解构出来的sum不是响应式数据
const handleClick = () => {
countStore.sum += 1
}
</script>
7. $subscribe
通过 store 的
$subscribe()方法侦听state及其变化
countStore.$subscribe((mutate, state) => {
console.log('countStore', mutate, state)
})
