状态管理工具pinia的使用

状态管理工具pinia的使用

1、创建一个store文件夹，存放状态管理的文件

2、在store文件夹下创建一个modules文件夹，存放各个模块状态

3、创建store-namespace.ts文件，用于存放所有状态id常量

export const enum Names {
    App = 'App'
}

4、定义状态仓库（组合api写法）

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import {Names} from '../../store-namespace'
// 写法有很多中，自己喜欢那种就是用那种就好
// 下面由写法大家可以自行查看
const useAppStore = defineStore(Names.App, () => {
	// 定义state
    let num:number = ref(0)
    // 定义actions
    const add = () => {
        num.value++
    }
    // 定义getters
    const doubleNum = computed(() => num.value * 2);
    return {
        user,
        add,
        doubleNum
    }
})
export default useAppStore

5、在main.ts中引入全局

import { createApp } from 'vue'
import { createPinia