Vue3中使用pinia来代替Vuex

前端小凯

已于 2023-02-09 23:38:37 修改

阅读量283

点赞数 1

文章标签： vue.js javascript 前端

于 2023-02-09 22:58:40 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43235503/article/details/128961977

版权

文章详细介绍了在Vue项目中如何安装和配置Pinia进行状态管理，包括在main.ts中创建Pinia实例，定义store，以及在组件中如何使用存储的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：安装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>