vue3项目中使用pinia-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3项目中使用pinia。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：

官网地址

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

pinia 作为Vue.js 状态管理库

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

优点：

vue3项目中使用pinia

优点

dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和更容易的调试
热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
插件：使用插件扩展 Pinia 功能
为 JS 用户提供适当的 TypeScript 支持或 autocompletion
服务器端渲染支持

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

pinia中常用的三大核心：

state 定义数据源
action 用来修改state
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文章来源地址https://www.toymoban.com/news/detail-425504.html

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

到了这里，关于vue3项目中使用pinia的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！