您现在的位置是：首页 >技术交流 >从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

<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语法糖的写法，来快速定义操作。✨✨✨✨✨