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 }
})
相关推荐
暂时先用这个名字11 天前
vue3中mitt和pinia的区别和主要用途,是否有可重合的部分?
开发语言·javascript·vue.js·pinia·组件·通信·mitt
酒茶白开水12 天前
React五官方文档总结二状态管理
前端·react.js·前端框架·context·状态管理·usereducer
getaxiosluo14 天前
实现vuex源码,手写
vue.js·源码·vuex·1024程序员节
kidding72317 天前
前端容易错的题3
前端·vuex·watch·computed·.prevent·.capture·.once
白雾茫茫丶1 个月前
前端的全栈之路:基于 Vue3 + Nest.js 全栈开发的后台应用
postgresql·vue3·vite·pinia·nest.js·prisma
濮水大叔1 个月前
在Vue3中如何实现四种全局状态数据的统一管理?
typescript·vue3·pinia
Amd7941 个月前
Nuxt.js 应用中的 page:transition:finish 钩子详解
前端开发·nuxt.js·状态管理·钩子函数·ui更新·页面动画·页面过渡
汤米粥1 个月前
Pinia只能存储简单数据类型
pinia
SuperHeroWu72 个月前
【HarmonyOS】深入理解@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
华为·harmonyos·状态管理·observed·objectlink·嵌套对象
天涯学馆2 个月前
Svelte Store与Vuex:轻量级状态管理对比
前端·vue·vuex·svelte