vue3中使用vuex详解

一、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的状态管理库。

使用这些替代库，可以根据项目的需要选择最适合的状态管理库。