从Vuex过渡到pinia

Vuex过渡到Pinia

众所周知，Vuex是一个状态管理库，它方便了我们任何组件不用考虑关系就可以共享一个全局的状态。但是

Vuex也有它一定的缺陷。主要缺点，我总结如下：

1. mutations里面不能写异步函数，否则就可能会造成调试异常。
2. 如果要有多个store，就需要分模块来进行管理，这无疑加重了我们的心里负担。
3. mutations里面修改State状态，Actions里面主要是一些逻辑操作
4. 对TS支持不太友好。

针对上述一系列问题，在Vue3中强烈使用Pinia。Pinia也是一个状态资源管理的东西。它相对于Vuex我觉得有以下优势：

1. 对TS支持友好
2. 使用更加简洁，包括：去除了mutations,modules,

下面来看一个pinia的例子（这里采用的是setup语法糖的写法）。

store/useTabStore

import {defineStore} from 'pinia'
import { ref} from 'vue'
const useTabStore=defineStore('tabStore',()=>{
    const state=ref<boolean>(false)

    const change=(value:boolean)=>{
        state.value=value
    }
    return{
        state,
        change
    }
})


export default useTabStore

App.vue

HelloWorld.vue

总结：

· 通过defineStore来定义不同的store，从而实现了Vuex的分模块。

​ 通过computed就是Vuex的getters

​ 通过methods就是Vuex中的actions

​ 通过setup语法糖的写法，来快速定义操作。✨✨✨✨✨