vuex5 pinia 对象式

//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 实例