您现在的位置是：首页 >技术交流 >vue3项目中使用pinia网站首页技术交流

前言：

官网地址

https://pinia.vuejs.org/zh/
中文文档
https://pinia.web3doc.top/

pinia    作为Vue.js 状态管理库

类型安全、可扩展性以及模块化设计。 甚至让你忘记正在使用的是一个状态库。

优点：

优点

• dev-tools 支持

  • 跟踪动作、突变的时间线

  • Store 出现在使用它们的组件中

  • time travel 和 更容易的调试

• 热模块更换

  • 在不重新加载页面的情况下修改您的 Store

  • 在开发时保持任何现有状态

• 插件：使用插件扩展 Pinia 功能

• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion

• 服务器端渲染支持

pinia 取消mutations操作，直接通过action可以同步或者异步更新state。

pinia中常用的三大核心：

1. state 定义数据源

2. action 用来修改state

3. getters类似计算属性进行计算

项目中使用pinia

cnpm i --save-dev pinia
//版本"pinia": "^2.0.34",

 pinia目录下创建index.ts文件 

.创建pinia
index.ts
//创建pinia
import { createPinia } from "pinia";
//创建pinia对象
const pinia = createPinia();
export default pinia;

//将pinia关联到vue项目
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
//引入pinia
import pinia from "@/pinia/index";
//将路由关联到vue3 项目
createApp(App).use(pinia).mount("#app");

//使用pinia 创建一个user 模块进行状态管理
import { defineStore } from "pinia";
//创建store
let userStore = defineStore("user", {
  state() {
    return {
      //定义数据源
      token: "",
    };
  },
  //执行修改状态
  actions: {
    saveToken(args: string) {
      this.token = args;
    },
  },
  //属性计算
  getters: {},
});
export default userStore;

在组件setup中使用pinia

<script setup lang="ts">
//引入对应的模块
import user from "@/pinia/module/userStore";

//执行获取store
let userStore = user();

//触发action修改state
userStore.saveToken("111")
</script>
<template>
  <div>商铺综合收费--{{ userStore.token }}</div>
</template>