Pinia的使用方式！！！

明天更新2023-12-23 3:45

1.安装Pinia：

复制代码

npm install pinia

2.在Main.js文件中导入：

javascript 复制代码

import { createPinia } from "pinia";

app.use(createPinia());

3.首先我们先创建一个单独的包供Pinia使用。（单独创建包，可以为后期的维护奠定基础！！）

创建一个cart.js文件：

javascript 复制代码

import { defineStore } from "pinia";

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useCartStore = defineStore("cart", {
  // state配置：用来管理公共响应式数据
  state: () => {
    return {
      //响应式数据定义到这里
      count: 0,
    };
  },
  // actions配置： 用来操作公共相应式数据
  actions: {
    add() {
      this.count++;
    },
  },
  // getters: 用来配置公共相应式数据的计算，可以重复使用
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

4.如何使用Pinia呢？？？

创建一个CartView.vue:(首先先导入上边创建的js文件，直接const声明变量来接收Pinia对象即可，调用的时候直接打点调属性即可)

html 复制代码

<script>
import { ref, computed } from "vue";
// 导入的时候@符号代表src目录
import { useCartStore } from "@/store/cart";
export default {
  // setup() 是页面的入口，每个.vue文件都有一个setup(){}入口函数，加载页面首先从这里开始。一般在这里做一些初始化的操作。比如：页面数据、初始化请求。vue会在合适的执行时机，来调用这个函数。
  setup() {
    const cartStore = useCartStore();
    console.log("++++", cartStore.count);

    return {
      cartStore,
    };
  },
};
</script>
<template>
  <main>
    <p @click="() => cartStore.add()">
      store的相应式数据：{{ cartStore.count }}:{{ cartStore.doubleCount }}
    </p>
  </main>
</template>