Pinia的使用网站首页 技术教程

Pinia的使用

xiaofiy 2024-06-26 14:23:21

简介Pinia的使用

什么是Pinia
为什么用它，VueX不香吗
如何使用Pinia
写到最后

什么是Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

为什么用它，VueX不香吗

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议。

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

如何使用Pinia

1.安装

用你最喜欢的包管理器安装 pinia

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

2.搭建

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

main.js文件引入

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

stores文件夹内index.js文件

import { getXXXList } from '/@/api/XXX';
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

stores文件夹内分类仓库文件（也就是各个pinia文件）

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;
    },
    getBanners(): Array{
      // 直接获取本store中的state数据
      return this.banners;
    },
    // 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: {
  	// 设置本store中的state数据
  	setBanners(info: Array) {
		this.banners= info
	},
	// 发起网络请求获取数据
  	async fetchHomeMultidata(payload: any = {}) {
      const { code, data }= await getXXXList (payload);
      if (code != 200) return
      // actions中通过this获取state
      this.setBanners(data);
    },
  },
  
});

export default useCounter;

3.使用

<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>


<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);
    // 直接使用 count.value 
    // 修改state
    function changeState() {
        // 修改一个
        counterStore.count = 100;
        // 同时修改多个
        counterStore.$patch({
          count: 99,
        });
    }
    // 请求接口
    const getData = () => {
      counterStore.fetchHomeMultidata(
      	{
			page: 1,
   			pageSize: 10,
		}
      );
    }
    
    //actions
    // 页面加载立马调用
    getData()
</script>