Vue3中使用pinia来代替Vuex

 第一步：安装pinia

npm install pinia --save-dev

第二步：main.ts中配置pinia

import { createApp } from "vue";
import App from "@/App.vue";
import router from "@/router/index";

// 引入pinia
import { createPinia } from "pinia";

// 创建pinia实例
const pinia = createPinia();

const app = createApp(App);

// 挂载pinia实例
app.use(router).use(pinia).mount("#app");

 第三步：store/index.ts配置pinia

// 引入创建的pinia的defineStore
import { defineStore } from "pinia";

// pinia仓库的唯一值 (为了区别别的store)
let testName: string = "testName";

// defineStore(唯一的值(为了区别别的store),{state(){return{}},actions:{},getters:{}})
let Test = defineStore(testName, {
  state() {
    return {
      num: 100,
      price: 5,
    };
  },
  actions: {},
  getters: {},
});

export default Test;

第四步：组件中使用pinia数据

<template>
  <div>
    <h3>home组件</h3>
    <p>pinia中的num：{{ test.num }}</p>
    <p>pinia中的price：{{ test.price }}</p>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

// 引入pinia index导出的是Test
import Test from "@/store/index";

export default defineComponent({
  name: "About",
  setup(props, context) {
    // 创建Test的pinia实例
    let test: any = Test();

    return {
      test,
    };
  },
});
</script>
<style scoped lang="less"></style>