VUE3 集成 Pinia 状态管理器
一、说明
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态(相当于 Vue3的Vuex)
二、demo
1、注册 Pinia(文件main.js)
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
createApp(App)
.use(createPinia())
.mount('#app')
2、自定义pinia:
import { defineStore } from "pinia";
const useCoreStore = defineStore(
{
// 应用程序中 store 的唯一 id
id: "coreStore",
// 定义值
state: () => {
return {
count: 100
};
},
// 获取state中的值
getters: {
//state与getters中的Key不能冲突,否则会读取失败
getCount: (state) => state.count
},
// 改变state中的值
actions: {
plus(){
this.count++
}
}
}
);
//注意 export 出的是一个对象。否则在使用的时候就要申明coreStore()
export const coreStore = useCoreStore()
3、vue使用pinia
<script setup lang="ts">
import { ref } from "vue";
import { coreStore } from "@/stores/useCoreStore";
const name = ref<string>(coreStore.name); //能直接使用coreStore,是因为我们直接 export 一个对象
const age = ref<number>(coreStore.age);
const sex = ref<string>(coreStore.sex)
</script>