vue3 Pinia 基本使用

下载

# npm

npm install pinia@next

# yarn

yarn add pinia@next

引入

在main.ts / js里引用 pinia的createPinia 然后用让app.use()加载一下这个函数

import { createApp } from 'vue'
import { createPinia } from "pinia"
import App from './App.vue'import router from "./router/router"
const app = createApp(App)
app.use(router)
app.use(createPinia())app.mount('#app')

创建Store

import { defineStore } from "pinia"export default defineStore({id: "#mian",state: () => ({name: "piniaName"}),getters: {gettersName: (state) => state.name.length},actions: {insertPost(data: string) {this.name = data}},
})

使用及改变state里定义的变量

<template><div>{{ piniaStore.name }}</div><div>长度：{{ piniaStore.gettersName}}</div><button @click="setPiniaState">修改</button><button @click="callAction">调用Action</button>
</template><script setup lang="ts">
import useMainStore from "@/piniaStore";
const piniaStore = useMainStore();
const setPiniaState = () => {piniaStore.$patch({name: "123456",  //使用$patch修改});
};
const callAction = () => {piniaStore.insertPost("123"); //这里直接同步调用action 也可以异步使用
};
</script>

异步使用action

import { defineStore } from "pinia"export default defineStore({id: "#mian",state: () => ({name: "piniaName"}),getters: {gettersName: (state) => state.name.length},actions: {async insertPost(data: string) {await // 内容}},
})

<template><div>{{ piniaStore.name }}</div><div>长度：{{ piniaStore.gettersName}}</div><button @click="setPiniaState">修改</button><button @click="callAction">调用Action</button>
</template><script setup lang="ts">
import useMainStore from "@/piniaStore";
const piniaStore = useMainStore();
const setPiniaState = () => {piniaStore.$patch({name: "123456",  //使用$patch修改});
};
const callAction = () => {piniaStore.insertPost("123").then(()=>{});
};
</script>

vue3 Pinia 基本使用相关推荐

教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言大家好,我是易[1],在上一篇文章中,我们有讲到<如何使用 vite+vue3 ...
vue3 pinia 状态管理（清晰明了）
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,其中包括 pinia ,从一脸懵到渐渐清晰过程,在此记录一下,若有不足,希望大佬可以指出. 中文官方文档:https://pini ...
vue3 + pinia 使用
pinia 文档 pinia 下载 yarn add pinia main.ts import { createApp } from 'vue'; import App from './App.vue ...
Vue3 - Pinia 状态管理，解构 store（Pinia storeToRefs API 详细使用教程）
目录前言 ES 解构方式(错误的) storeToRefs(正确的) 总结 SEO 前言解构啥意思呢?大家应该对 ES 传统方式解构非常了解,相同的,解构 store 也是如此. 假设你在状态管理 ...
Vue3 的状态管理库（Pinia）
目录前言: 一.什么是 Pinai 二.安装与使用pinia 三.什么是 store 四.state 1. 定义 state 2. 组件中访问 state 五.Getters 1. 定义 Gette ...
基于Vite4.x+Vue3+VEPlus+Pinia搭建轻量级管理后台模板ViteAdmin
整合vite4.js+vue3+pinia开发轻量级后台管理系统Vite-Admin 使用最新前端技术栈 vue3+vite4+vue-router+pinia2+vue-i18n+ve-plus 等 ...
极简但是很全的vue3+vite+pinia项目模板，开箱即用
主要功能: 1.layout布局 2.router,pinia,axio, 3.element-ui plus 部分组件二次封装 4.多语言 / icon图标组件封装 / 多环境 / eslint 其 ...
Vue3+Vite3 SSR基本搭建
Vue3+Vite3 SSR基本搭建首先说明如果是生产使用强烈推荐Nuxt,但是如果想深入服务端渲染的运行原理,可以看本篇,会根据渲染流程搭建一个demo版ssr,源码在最后会贴上主要技术栈:Vi ...
Vue3后台管理系统模板推荐
文章目录 @[TOC](文章目录) 1.Vue-Vben-Admin 2.vue-manage-system 1.Vue-Vben-Admin Vue-Vben-Admin(github上的标星数为1 ...

vue3 Pinia 基本使用

vue3 Pinia 基本使用相关推荐

最新文章

热门文章