Vuex过渡到Pinia
众所周知，Vuex是一个状态管理库，它方便了我们任何组件不用考虑关系就可以共享一个全局的状态。😃但是
Vuex也有它一定的缺陷。主要缺点，我总结如下：
- mutations里面不能写异步函数，否则就可能会造成调试异常。
- 如果要有多个store，就需要分模块来进行管理，这无疑加重了我们的心里负担。
- mutations里面修改State状态，Actions里面主要是一些逻辑操作
- 对TS支持不太友好。
针对上述一系列问题，在Vue3中强烈使用Pinia。Pinia也是一个状态资源管理的东西。它相对于Vuex我觉得有以下优势：
- 对TS支持友好
- 使用更加简洁，包括：去除了
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
<template>
我是APP组件:{{ store.state }}
<HelloWorld></HelloWorld>
<hr>
</template>
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue';
import tabStore from './store/useTabpinal.ts';
const store = tabStore();
console.log(store.state);
</script>
<style lang='scss' scoped>
</style>
HelloWorld.vue
<template>
我是children组件
<button @click="handleStore">切换state的值</button>
</template>
<script setup lang="ts">
import tabStore from '../store/useTabpinal';
const store=tabStore();
const handleStore=()=>{
if (store.state) {
store.change(false)
}else{
store.change(true)
}
}
</script>
<style lang='scss' scoped>
</style>
总结：
· 通过defineStore来定义不同的store，从而实现了Vuex的分模块。
通过computed就是Vuex的getters
通过methods就是Vuex中的actions
通过setup语法糖的写法，来快速定义操作。✨✨✨✨✨
