Pinia简单入门

tip：本文仅是本人是学习过程中记录的文章，水平非常有限，内容可能存在许多错误，还请大家指正

下载pinia，在main.js引入

// 引入 pinia
import { createPinia } from "pinia";
app.use(createPinia())

定义仓库

// 引入
import { defineStore } from "pinia";

// 1. 定义容器
export const useMainStore = defineStore("main", {
  state: () => {
    return {
      count: 0,
      num: 1,
      arr: [1, 2, 3],
    };
  },
  getters: {},
  actions: {
    addCount() {
      this.count++;
      //   this.$patch((state) => {});
    },
  },
});

组件内使用

<template>
  <button @click="addCount">{{ count }} {{ num }} {{ arr }}</button>
  <button @click="mainStore.addCount">{{ mainStore.count }}</button>
  <button @click="changeStoreData">addCount</button>
</template>

<script setup>
import { useMainStore } from "../store/index";
import { storeToRefs } from "pinia";

const mainStore = useMainStore();
// 这样解构出来的数据不是响应式的 是一次性的
// const { count } = useMainStore();
// const { addCount } = useMainStore();

// 正确解构
const { count, num, arr } = storeToRefs(mainStore);
// const { addCount } = StoreActions(mainStore);

function changeStoreData() {
  // 单个
  // mainStore.count++;

  // 多个 批量修改性能优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   num: mainStore.num + 1,
  // });

  //多个
  mainStore.$patch((state) => {
    state.count++;
    state.num++;
    state.arr.push(4);
  });
}
</script>