Vuex4 极速入门到上手

时间:2022-03-17 06:44:46

Vuex4 极速入门到上手

vuex4 是 vue3的兼容版本,提供了和vuex3 的相同API。因此我们可以在 vue3 中复用之前已存在的 vuex 代码。

一、安装以及初始化

vuex4安装:

  1. npm install vuex@next 

为了向vue3初始化方式看齐,vuex4 初始化方式做了相应的变化,使用新的 createStore 函数创建新的 store 实例。

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import router from './router' 
  4. import { createStore } from "vuex" 
  5.  
  6. const store = createStore({ 
  7.  state(){ 
  8.   return
  9.    num:1, 
  10.   } 
  11.  } 
  12. }) 
  13.  
  14. const app = createApp(App) 
  15. app.use(router) 
  16. app.use(store) 
  17. app.mount('#app'
  18.  
  19. //在组件内使用时与之前一样 
  20. <div>{{$store.state.num}}</div> 

二、vuex4在组件内的使用

2.1、使用场景1

在组件的模板中直接使用,与之前的api保持一致

  1. // 在 main.js 内 
  2. const store = createStore({ 
  3.  state(){ 
  4.   return
  5.    num:1, 
  6.   } 
  7.  }, 
  8.  mutations:{ 
  9.   addNum(state){ 
  10.    state.num++ 
  11.   } 
  12.  }, 
  13.  actions:{}, 
  14.  modules:{} 
  15. }) 
  16.  
  17. //组件内 
  18. <div> 
  19.  {{$store.state.num}} 
  20.  <button @click="$store.commit('addNum')">num自加</button>    
  21. </div> 

2.2、使用场景2

通过 useStore 把store 引入组件内,然后操作 store 。

  1. <template> 
  2.  <div> 
  3.   store组件 
  4.   {{state.num}} 
  5.   <button @click="add">num自加</button>  
  6.  </div> 
  7. </template> 
  8.  
  9. <script> 
  10. import { useStore } from "vuex" 
  11. export default { 
  12.  setup(){ 
  13.   const store = useStore() 
  14.   return
  15.    state:store.state, 
  16.    add(){ 
  17.     store.commit('addNum'
  18.    } 
  19.   } 
  20.  } 
  21. </script> 

2.3、使用场景3

store 内使用到多个值时,可以通过 toRefs 方法,将 store.state 内的数据直接展开。

  1. <template> 
  2.  <div> 
  3.   {{num}} 
  4.   <button @click="add">num自加</button> 
  5.  </div> 
  6. </template> 
  7.  
  8. <script> 
  9. import { useStore } from 'vuex' 
  10. import { toRefs } from "vue" 
  11. export default { 
  12.  setup(){ 
  13.   const store = useStore() 
  14.   return
  15.    ...toRefs(store.state), 
  16.    add(){ 
  17.     store.commit('addNum'
  18.    } 
  19.   } 
  20.  } 
  21. </script> 

三、 getters 的用法

与之前的用法保持一致:

  1. const store = createStore({ 
  2.  state(){ 
  3.   return
  4.    num:1, 
  5.   } 
  6.  }, 
  7.  getters:{ 
  8.   doubleNum(state){ 
  9.    return state.num*2 
  10.   } 
  11.  }, 
  12. }) 
  13.  
  14. //使用1:直接在template中使用 
  15. <template> 
  16.  {{$store.getters.doubleNum}} 
  17. </template> 
  18.  
  19. //使用2:利用计算属性获取 
  20. <template> 
  21.  <div> 
  22.   {{getDouble}} 
  23.  </div> 
  24. </template> 
  25. <script> 
  26. import { useStore } from "vuex" 
  27. import { computed } from 'vue' 
  28. export default { 
  29.  setup(){ 
  30.   const store = useStore() 
  31.   return
  32.    state:store.state, 
  33.    getDouble:computed(()=>store.getters.doubleNum) 
  34.   } 
  35.  } 
  36. </script> 

四、mutations 和 actions 的用法

调用 mutations 内的方法时,使用 commit 调用。上述的使用场景2 就是 mutations 方法的调用。

而 actions 异步更新 state 中的数据,还是需要经过 mutations 。

  1. <template> 
  2.  <div> 
  3.   {{state.num}} 
  4.   <button @click="asyncUpdateNum">更新num</button> 
  5.  </div> 
  6. </template> 
  7.  
  8. <script> 
  9. import { useStore } from "vuex" 
  10. export default { 
  11.  setup(){ 
  12.   const store = useStore() 
  13.   return
  14.    state:store.state, 
  15.    asyncUpdateNum(){ 
  16.    store.dispatch('updateNum',88) 
  17.    } 
  18.   } 
  19.  } 
  20. </script> 

组件内可以通过 this.$store 属性访问store容器,使用 composition API 可以通过 useStore代替。其他的用法基本相同。

原文链接:https://www.toutiao.com/a7025884719959032328/