vue3 + vite + ts 使用pinia

介绍

vue新一代状态管理库，相当于vuex

特性

1.像定义components一样定义store
 
2.支持ts
 
3.去除mutations，只有state，getters，actions(支持同步异步)
 
4.轻量级(1kb)
 
5.vuex是要有主入口进行统一导入，pinia可以分模块导入

安装pinia

npm install pinia

我们在src里面创建一个store文件夹 在创建一个index.ts文件 已及modules文件夹和home.ts

index.ts文件内容

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
// 因为 pinia的实现也是通过vue的各种api（ref/reactive/computed等）
// 所以，不要求一定要在Vue上挂载注册，可以随便在组件中使用，组件外使用也有对应方案
// 不过，app.use(store) 可以把store实例挂载到Vue上使用

home.ts内容

import { defineStore } from 'pinia'

export const homeStore = defineStore('homeStore',{
    //state 属性是用来存储数据的
    state: () => {
        return {
            count: 0,
            num:1,
        }
    },
    //getter属性值是一个对象，该对象里面是各种各样的方法
    // 该方法会默认接收一个state参数，也就是state对象，然后该方法返回的是一个新的数据。
    getters: {
        getCount: state => {
            return state.count + 1
        },
        // 在方法中调用其他getters中的方法
        getNum(): number{
            return this.num + this.getCount
        }
    },
    // actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。
    actions: {
        setNum(num:number){
            this.num = num + 3
        }
    }
})

在main.ts中挂在pinia

import pinia from '@/store/index.js'
app.use(pinia)

在页面中使用