VUE3 集成 Pinia 状态管理器

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>