Vue3学习-Pinia 集中式状态管理工具

安装 Pinia

js 复制代码
npm i pinia

Pinia 集中式状态管理工具官网 传送门

引入 Pinia

js 复制代码
//引入
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App);
app.use(pinia);

使用

js 复制代码
// store 注册
import { defineStore } from "pinia";
export const useAStore = defineStore('a',{
    state(){
        return { a:1 }
    },
    getters: {
	   doubleCount: (state) => state.a * 2,
	},
	actions: {
	    increment(val) {
	      this.a = val
	    },
	},
})
// 组件获取
import { useAStore,storeToRefs } from '@/store/a'
const aStore = useAStore()
// 监听aStore 变化
aStore.$subscribe((mutate,state) => {
	console.log(mutate); // 行为
	console.log(state); // 改变后数据
});
let { a } = storeToRefs(aStore ) //store响应式数据,用于修改实时改变的值
console.log(aStore)
//修改
aStore.a += 1; // 单个
aStore.$patch({ // 批量
	a:2
});
aStore.increment(3)
// 获取getter
aStore.doubleCount()

组合式使用

js 复制代码
import { reactive, ref } from "vue";
import { defineStore } from "pinia";
export const useAStore = defineStore('a',{
    let a = ref('1')
    async function addAFun(){
    	a++
    }
    return { a,addAFun }
})
相关推荐
dr李四维11 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
肉肉不吃 肉12 天前
父子组件传递数据和状态管理数据
前端·javascript·vue.js·pinia
霸王蟹12 天前
Pinia-构建用户仓库和持久化插件
前端·vue.js·笔记·ts·pinia·js
CrazyMo_13 天前
OpenHarmony 入门——ArkUI 跨页面数据同步和页面级UI状态存储LocalStorage小结(二)
harmonyos·装饰器·openharmony·状态管理·arkui
程序员爱钓鱼18 天前
从零到精通:用go+vue语言打造高效多语言博客系统的完整指南
后端·go·vuex
雪碧聊技术1 个月前
使用v-for用户菜单渲染
pinia·v-for·菜单渲染·mybatis查询·数据库表的设计
SuperHeroWu71 个月前
【HarmonyOS Next】鸿蒙状态管理V2装饰器详解
华为·harmonyos·装饰器·状态管理·v2·v1
ONEPEICE-ing1 个月前
快速入门——状态管理VueX
前端·javascript·vue.js·vue·vuex
陈皮话梅糖@1 个月前
深入解析 Flutter GetX
flutter·状态管理·getx
一雨方知深秋2 个月前
pnpm, eslint, vue-router4, element-plus, pinia
pnpm·pinia·element-plus·暂存区eslint·vue-router4