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的狀態管理庫。

使用這些替代庫，可以根據項目的需要選擇最適合的狀態管理庫。