Vue3状态共享

Vuex其实是为了在Vue2中更好的去实现组件间的对象传递，但是 Vuex 的 Getter、Module、Store、Mutation、Action 等概念，无形中增加了使用成本。的确很绕，但又不得不绕，不可争议的是他在vue2的大型项目中确实会发挥一定的作用。像mutation的实质是可回放可观察的事件流，在大规模应用中这是定位bug的救星。但是Vue3发布之后，Vuex4向下兼容只是为了去支持Vue3的写法，并没有做出很大的改变。依然是之前的设计思路。

Vue3中该如何去进行组件间的对象传递

在Vue3中可以使用reactive函数去进行响应式对象的创建

import { reactive } from 'vue'
export const state = reactive({ counter: 0 })

reactive返回了一个可以跟踪其属性更改的proxy对象。同时Composition API的设计理念就是把接口的可重复部分及其功能提取到可复用的代码段中，增加代码的可复用性、逻辑性。如果把他和reactive函数结合在一起其实就可以实现简单的组件间的对象传递及状态共享。

<template>
    <div>{{{stateData.counter}}</div>
    
    <button @click="add">增加</button>
</template>

<script  setup>
import { useStore } from 'vuex'
import { createStore, stateData } from '../../store/demo'



const add = () => {
    
    stateData.counter++;
    
}
</script>

在不同的组件中去引入同一个reactive抛出的proxy对象可以直接去改变他的内部状态，其他组件内的状态也会同步更改。同时你可以获得更好的类型提示和变量联想。

更健壮的方案

上面的写法其实有一些弊端，因为整个proxy对象是公开的谁都可以修改的，你不知道是谁去修改了这个对象。

可以使用readonly去把他包起来，让他成为一个受保护的对象，只能通过抛出的函数来改变其内部状态。

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

我不理解？

看到很多博客都说用reactive和provide/inject去结合起来，去替代Vuex。我试过但是只能在初始化时将值或函数传播给所有子孙组件，但在父组件修改时并不能监控到修改响应，一次性的，并不能去取代Vuex，而且我感觉确实没有必要去在操作一层，如上的方式已经可以满足基本使用场景了，如果在去进行包装的话你可能又造了一个复杂的Vuex出来。

Vuex5

感兴趣的可以去看看vue的rfcs提案，里面就有关于Vuex5的提案，pinia现在已经可以使用了。