vue3+vite+ts使用pinia

最近官方推出来一个最新的vuex版本,也算是vuex5的版本吧,为了尊重这个版本的原作者,所起名字为pinia.

比起之前的版本使用起来简单方便,而且模块化更加清晰,维护成本更低,所以更推荐大家使用pinia状态管理

1.安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2.在src目录下新建store文件夹

 3.在文件夹下面新建product.ts文件(可以根据你使用的模块来命名,一个模块对应一个ts文件)

import {defineStore} from "pinia";

export const userProduct = defineStore('product', {
    state: () => {
        return {
            product:[{key:1,value:'产品'}]
        }
    },
    //适合计算属性
    getters: {},
    //适合定义业务逻辑
    actions: {

    }
})

defineStore(),有两个参数,第一个可以指定使用者的id(可以随便起名字),第二个参数是个对象,里面包含state,getters,actions三个方法 

4.在vue组件使用

<script setup lang="ts">
import {userProduct} from '../store/product'

const store = userProduct()

//通过 $reset 重置store里面state的数据
//store.$reset()
//打印
console.log(store.product)


</script>

这就配置好啦,看起来是不是比之前的vuex使用简单方便~