一、vue3中使用vuex传值
在vue3中使用vuex可以方便地传递组件之间的数据。在使用vuex的过程中，首先需要安装并导入vuex库，然后创建一个store对象：
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})
state为vuex中存放数据的地方，mutations为修改state数据的地方，可以在组件中通过commit来调用mutations并修改store中的数据：
store.commit('increment')也可以通过vuex中的mapMutations方法来简化调用：
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['increment'])
}
}这样就可以在组件中使用this.increment()来调用mutations中的increment方法，从而修改store中的数据了。
二、vue3不使用vuex
在vue3中，除了使用vuex传递数据之外，也可以直接使用props来传值，或使用 provide/inject 来实现跨组件传值。
使用props来传值，可以直接在父组件中给子组件传递值：
<template>
<child-component :name="name"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: {
ChildComponent
},
data() {
return {
name: 'Tom'
}
}
}
</script>在子组件中使用props来接收父组件传递的值：
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
name: {
type: String,
default: ''
}
}
}
</script>使用provide/inject来跨组件传值，可以在父组件中使用provide提供数据，在子组件中使用inject访问数据：
// 父组件中
export default {
provide() {
return {
name: 'Tom'
}
}
}
// 子组件中
export default {
inject: ['name'],
mounted() {
console.log(this.name) // 输出 'Tom'
}
}三、vue3中使用jsx
在vue3中可以使用jsx来编写组件，而在使用vuex传值的过程中也可以使用jsx来调用state和mutations中的数据和方法：
import { computed, defineComponent } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
setup() {
const store = useStore()
const count = computed(() => store.state.count)
function increment() {
store.commit('increment')
}
return () => (
<div>
<p> Count: {count.value} </p>
<button onClick={increment}>Increment</button>
</div>
)
}
})使用jsx需要先导入defineComponent和useStore方法，定义组件中的数据和方法，最后在setup方法中返回一个渲染函数，通过jsx来渲染页面。
四、vue3中使用axios
在vue3中使用axios可以方便地进行接口请求。在安装axios库之后，可以在组件中通过import导入axios库，然后在methods中定义请求方法：
import axios from 'axios'
export default {
name: 'UsersList',
data() {
return {
users: []
}
},
methods: {
getUsers() {
axios.get('/api/users').then(({ data }) => {
this.users = data
})
}
},
mounted() {
this.getUsers()
}
}这样就可以在请求到数据之后将数据保存到组件的data中，然后在页面中通过v-for循环渲染数据。
五、vue3中使用vue2组件
在vue3中使用vue2组件需要先导入vue2的库，并在setup方法中使用defineComponent方法来定义组件：
import { defineComponent } from 'vue'
import Vue2Component from './Vue2Component.vue'
export default defineComponent({
components: {
Vue2Component
},
setup() {
return () => (
<div>
<Vue2Component />
</div>
)
}
})在setup方法中，需要使用return返回一个渲染函数，然后在模板中渲染vue2组件，在components中定义注册vue2组件的方法。
六、vue3中使用vue2生命周期不执行
在vue3中使用vue2组件时，vue2组件中的生命周期会被触发两次，需要手动去重：
mount() {
if(!this.$refs.vue2Component) {
const Vue2Component = this.$options.components.Vue2Component
const instance = new Vue2Component()
instance.$mount()
this.$refs.vue2Component.appendChild(instance.$el)
}
}在mount钩子函数中，判断当前是否已经包含了vue2组件，如果没有则新建一个vue2组件实例并挂载到当前组件中。
七、vue3中的proxy
在vue3中使用了proxy来替代vue2中的defineProperty实现数据的响应式。proxy可以对整个对象进行代理，而不仅限于属性级别的监听。
在vue3的setup方法中，可以通过ref来创建响应式的变量：
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return {
count
}
}
}在vue3中，通过ref创建出来的变量是一个对象，需要通过.value来获取变量的值。
八、为什么vue3不推荐用vuex了
vue3中使用了proxy来替代vue2中的defineProperty实现数据的响应式，同时也重构了数据响应式机制和状态管理机制，使得状态管理变得更加简单和灵活，所以vue3中更加推荐使用组合式API来进行状态管理。
对于小型的应用程序，使用组件内部的状态即可，不需要使用vuex。对于大型的应用程序，可以将一些通用的状态封装成逻辑块，然后在不同的组件中复用。
九、vuex只能用于vue吗
vuex是与vue框架紧密耦合的状态管理库，但是也可以在react等其他框架中使用。需要使用vuex提供的“vue”插件来实现在其他框架中使用vuex。
在react中使用vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
export default store在其他框架中使用vuex需要先导入vue，并使用Vue.use()来安装vuex插件，然后可以像使用vue中的vuex一样使用。
十、替代vuex选取
如果不想使用vuex来进行状态管理，还有一些其他的状态管理库可以选择：
- Vuex-pathify：简化vuex的使用和管理，提高代码的开发效率；
- Pinia：使用Composition API构建的强类型状态管理库；
- Easy Peasy：使用React Hooks和RxJS的状态管理库。
使用这些替代库，可以根据项目的需要选择最适合的状态管理库。
