//npm i pinia -S
/** main.ts
* import {createPinia} from 'pinia'
createApp(App).use(createPinia()).mount("#app");
*/
//
import { defineStore } from "pinia";
export const storeA = defineStore("storeA", {
state: () => {
return {
piniaMsg: "hello pinia",
aa: "yyyy",
num: 1,
};
},
getters: {
comPiniaMsg() {
console.log("%c piniaGetter给调用了", "color:red");
return this.num + "zzzzzz";
},
},
actions: {
changeNum(payload) {
this.num += payload;
},
},
});
// export const storeA = defineStore("storeA", {...});
// export const storeB = defineStore("storeB", {...});
// export const storeC = defineStore("storeB", {...});
<template>
<div>
<h1>{{ com }}</h1>
<h1>{{ com }}</h1>
<h1>{{ com }}</h1>
<h1>{{ com }}</h1>
<button @click="changeState">改变state 的值</button>
{{ piniaStoreA.num }}
<hr>
<h3>{{num}}失去响应式的num</h3>
<button @click="reset">重置state</button>
</div>
</template>
<script lang="ts" setup>
import { storeA } from "./index.js";
import { computed } from "vue";
import { storeToRefs } from "pinia";
let piniaStoreA = storeA();
let {num} =storeToRefs(piniaStoreA);//解决直接结构失去响应式
piniaStoreA.$patch({
//修改多个属性
piniaMsg: "daming",
aa: 999,
});
let reset = ()=>{
piniaStoreA.$reset()
}
let com = computed(() => {
return piniaStoreA.comPiniaMsg;
});
let changeState = () => {
// 调用pinia 里面actions 里面的方法传递参数
piniaStoreA.changeNum(9);
piniaStoreA.num++
// setTimeout(() => {
// piniaStoreA.num+=1
// }, 500);
};
</script>
<style scoped></style>
//与vuex 的区别
1.没有 mutations 和modules 每定义一个 defineStore('xxx',{})就是一个模块 更加简洁 state 是函数形式 返回一个对象 类似组件data 里面定义的所有属性 都在 外层 直接用实例 . 出来
2.piniaStoreA.xxx 而且所有的属性 都是相应式的 可以直接在组件内修改 state 里面的值 并且开发者工具可以检测到这是与vuex最大的区别
3.同步的和异步方法都在 actions里面书写 也可用 实例的 $patch方法 传一个对象里面可以写多个要修改的属性 或者一个回调 参数就是 当前pinia实例对象
4 .可以使用 实例的$reset方法 将 state 重置 piniaStoreA.$reset()
5.Pinia解构(storeToRefs) 当通过 结构获取 state 里面的值是 不能直接结构 let {} = piniaStoreA
会失去响应式 import { storeToRefs } from 'pinia' let {} = storeToRefs(piniaStoreA) 类似 toRefs
6. 可以在getters 和actions 里面 使用this 指向 pinia 实例