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 撤销mutation相关操作后，在无需修改的情况下可以直接使用action来完成同步或异步的状态更新。
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
<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>
代码解释全部评论 (0)
还没有任何评论哟~