Pinia

集中式状态(数据)管理 | redux vuex pinia

  • 新建一个store文件夹
  • 创建vue组件对应的.ts
  • 引入和创建

main.ts

//引入createApp用于创建应用
import { createApp } from "vue";
//引入App.vue根组件
import App from "./App.vue";
//引入pinia
import { createPinia } from "pinia";
//创建应用
const app = createApp(App);
//app.use(router);
app.use(createPinia());
//挂载应用
app.mount("#app");

count.ts

import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
  state: () => {//状态 存储数据的容器
    return {
      count: 0,
    };
  },
  getters: { //计算属性
    int: (state) => state.count * 2,
  },
  actions: { //方法
    increment() {
      this.count++;
    },
  },
});

使用

<script setup lang="ts"> 
	import {useCountStore} from '@/store/count'
    const countStore = useCountStore()
</script>