pinia学习的博文

学习记录的一些博文:

• 1.https://www.cnblogs.com/goloving/p/16789607.html

都是一些最最基础的操作，实际场景比这个复杂
其中提到了pinia-plugin-persist 来持久化存储

• 2.https://www.cnblogs.com/yaopengfei/p/17053053.html

里面提及:storeToRefs用法

• 3.https://www.cnblogs.com/fuct/p/16849082.html

最为详细，全面
里面订阅状态相关的看不懂

• https://www.cnblogs.com/youyuan1980/p/16973666.html

持久化的简单demo

• https://www.cnblogs.com/newBugs/p/17003034.html

直接上了一个ts demo

• layout.js

import { defineStore } from 'pinia';
// useLayout 也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。
 export const useLayoutStore = defineStore('main', {
  // 是一个箭头函数
  state: () => {
    return {
      counter: 'holle',
    }
  },
  getters: {},
  actions: {
     setCounter() {
      this.counter = '你好'
    }
  }
})

• app.vue

<template>
  <div>
    <div>{{ counter }}</div>
    <button v-on:click="change">改变</button>
  </div>
</template>

<script setup>
import { useLayoutStore } from "./store/layout";
import { storeToRefs } from "pinia";
// 如果想通过结构的方式拿到store数据就必须通过storeToRefs API去包裹，才能维持响应式数据

const layoutStore = useLayoutStore();
const { counter } = storeToRefs(layoutStore);

const change = () => {
  // 这里支持直接修改
  //layoutStore.counter = "你好";

  // OR --同时修改多个时使用
  // layoutStore.$patch({
  //   counter: "你好",
  // });

  // // OR --同时修改多个时使用
  // layoutStore.$patch((store) => {
  //   store.counter = "你好";
  // });

  // // OR 通过 actions 内部写方法修改变量
  layoutStore.setCounter();
};

</script>