Pinia封装使用

先创建stores文件夹，内部创建index.js文件和各分类文件

main.js文件内部

//引入仓库使用，默认index.js
import pinia from "./stores";
app.use(pinia);

stores文件夹内index.js文件内部

import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

stores文件夹内分类仓库文件内部(counter.js文件)

import { defineStore } from "pinia";
//引入外部仓库，计算属性4.用到
import useUser from "./user";
//仓库命名：use+id名，(应该用use+id名+Store更好)
const useCounter = defineStore("counter", {
  //state
  state: () => ({
    count: 99,
    friends: [
      { id: 111, name: "why" },
      { id: 112, name: "kobe" },
      { id: 113, name: "james" },
    ],
    banners: [],
  }),
  
  //getters
  getters: {
    // 1.基本使用
    doubleCount(state) {
      return state.count * 2;
    },
    // 2.一个getter引入另一个getter
    doubleCountAddOne() {
      // this是store实例
      return this.doubleCount + 1;
    },
    // 3.getters支持返回一个函数
    getFriendById(state) {
      // 外部传入id,在state中获取对应对象
      return function (id) {
        for (let i = 0; i < state.friends.length; i++) {
          const friend = state.friends[i];
          if (friend.id === id) {
            return friend;
          }
        }
      };
    },
    // 4.getters中用到别的store中的数据
    showMessage(state) {
      // 1.获取user信息,已在顶部引入useUser所在文件
      const userStore = useUser();
      // 2.获取自己的信息
      // 3.拼接信息
      return `name:${userStore.name}-count:${state.count}`;
    },
  },
  
  //actions
  actions: {
    async fetchHomeMultidata() {
      // 发起网络请求获取数据
      const res = await fetch("http://123.207.32.32:800/home/mutidata");
      const data = await res.json();
      // actions中通过this获取state
      this.banners = data.data.banner.list;
    },
  },
  
});

export default useCounter;

使用

<script setup>
    //公共
    import { toRefs } from "vue";
    import { storeToRefs } from "pinia";
    //引入分类仓库
    import useCounter from "./stores/counter";
    //创建实例
    //命名:use后面名字+Store
    const counterStore = useCounter();
    
    //state
    //解构出来的变量是没有响应式的，需要使用toRefs，或者pinia提供的storeToRefs
    const { count } = toRefs(counterStore);
    //或
    const { count } = storeToRefs(counterStore);
    // 修改state
    function changeState() {
        // 修改一个
        counterStore.count = 100;
        // 同时修改多个
        counterStore.$patch({
          count: 99,
        });
    }
    // 重置state
    function resetState() {
      counterStore.$reset();
    }
    
    //actions
    // 页面加载立马调用
    counterStore.fetchHomeMultidata();
</script>

<template>
  //state调用
  //可以直接写仓库内变量名获取
  <div>{{ counterStore.count }}</div>
  //在js中解构出来直接使用
  <div>{{ count }}</div>
  //修改/重置state
  <button @click="changeState">修改</button>
  <button @click="resetState">重置</button>
  
  //getters调用
  <h2>doubleCount:{{ counterStore.doubleCount }}</h2>
  <h2>doubleCountAddOne:{{ counterStore.doubleCountAddOne }}</h2>
  <h2>friend-111:{{ counterStore.getFriendById(111) }}</h2>
  <h2>showMessage:{{ counterStore.showMessage }}</h2>
</template>