yarn add pinia
// or 
npm install pinia

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './app.vue'
createApp(App).use(createPinia()).mount('#app')

import { defineStore } from "pinia";
export const mainStore = defineStore("main", {
  state: () => {
    return {
      name: "randy man",
      age: 24,
    };
  },
  getters: {
    getterName(state) {
      return state.name.toUpperCase() + "-----" + state.age;
    },
    // 這種方式也可以，不過需要自己手動指定返回值類型
    getterAge(): number {
      return this.age;
    },
  },
  actions: {
    // 直接使用this修改state
    changeName(payload: string) {
      this.name = payload;
      return "success";
    },

    // 異步action
    async fetchData(payload: number) {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${payload}`
      );
      const res = response.json();

      // 調(diào)用其他action
      // this.changeName("xxx");

      return res;
    },
  },
});

state: () => {
  return {
    name: "randy man",
    age: 24,
  };
},

getters: {
  getterName(state) {
    return state.name.toUpperCase() + "-----" + state.age;
  },
  // 這種方式也可以，不過需要自己手動指定返回值類型
  getterAge(): number {
    return this.age;
  },
},

actions: {
  // 直接使用this修改state
  changeName(payload: string) {
    this.name = payload;
    return "success";
  },
  // 異步action
  async fetchData(payload: number) {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${payload}`
    );
    const res = response.json();

    // 調(diào)用其他action
    // this.changeName("xxx");

    return res;
  },
},

// user.ts
import { useAppStore } from './app'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 調(diào)用 app store 里的 action 方法
      return data
    }
  }
})

<template>
  <div>
    <div>name: {{ name }}</div>
    <div>getterName: {{ getterName }}</div>
    <div>
      <button @click="updateMainName">修改main name</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { mainStore } from "@/pinia/main";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "PiniaView",
  setup() {
    const store = mainStore();

    const updateMainName = async () => {
      // 直接修改 不建議
      // store.name = "demi woman";

      // 對象形式修改
      // store.$patch({ name: "demi woman" });

      // 函數(shù)形式修改
      // store.$patch((state) => {
      //   state.name = "demi woman";
      // });

      // 通過action修改
      const result = store.changeName("demi woman");
      console.log(result);

      // 返回的值不會被Promise包裹
      const result2 = await store.fetchData(1);
      console.log(result2);
    };

    // 直接解構(gòu)不能響應(yīng)式
    // const { name, getterName } = store;

    // 這樣響應(yīng)式
    const name = computed(() => store.name);
    const getterName = computed(() => store.getterName);

    // 這樣也能響應(yīng)式
    // const { name, getterName } = storeToRefs(store);

    return {
      name,
      getterName,
      updateMainName,
    };
  },
});
</script>

import { storeToRefs } from "pinia";
const store = mainStore();
// 直接解構(gòu)不能響應(yīng)式
// const { name } = store;
// 這樣響應(yīng)式
const name = computed(() => store.name);
// 這樣也能響應(yīng)式
// const { name } = storeToRefs(store);

import { storeToRefs } from "pinia";
const store = mainStore();
// 直接解構(gòu)不能響應(yīng)式
// const { getterName } = store;
// 這樣響應(yīng)式
const getterName = computed(() => store.getterName);
// 這樣也能響應(yīng)式
// const { getterName } = storeToRefs(store);

const updateMainName = async () => {
  // 直接修改 不建議
  // store.name = "demi woman";
  // 對象形式修改
  // store.$patch({ name: "demi woman" });
  // 函數(shù)形式修改
  // store.$patch((state) => {
  //   state.name = "demi woman";
  // });
  // 通過action修改
  const result = store.changeName("demi woman");
  // action 返回啥就是啥 result等于'success'
};