pinia

项目默认基于 vue3 搭建的

介绍

安装

yarn add pinia
# 或者使用 npm
npm install pinia

使用

初始化

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount("#app");

创建 store

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

使用 store

import { useCounterStore } from "./stores/counter";

const counterStore = useCounterStore();

counterStore.increment();
console.log(counterStore.count);


// 以下代码会破坏响应式结构
const { count } = counterStore; // 这将失去响应式

// 正确的用法：
import { storeToRefs } from 'pinia'

const { count } = storeToRefs(counterStore); // 这将保持响应式， 并且可以解构  storeToRefs它将为每一个响应式属性创建引用




// `watch` 的第一个参数应该是一个 getter 函数或响应式引用，而不是直接传递 `counterStore.count`（这样会丢失响应式）。正确写法如下：

import { watch } from 'vue'

watch(
    () => counterStore.count,
    (count) => {
        // 每当 count 发生变化时，将其持久化到本地存储
        localStorage.setItem('piniaCount', JSON.stringify(count))
    }
)

// 如果你想监听整个 store 的变化，可以这样写：

watch(
    counterStore,
    (state) => {
        localStorage.setItem('piniaState', JSON.stringify(state))
    },
    { deep: true }
)