Vuex4 极速入门到上手

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

[[434975]]

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代替。其他的用法基本相同。

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-10-29 07:47:35

Vue 3teleport传送门组件

2020-12-18 09:17:27

分析设计师UI

2009-09-25 10:24:40

Androind入门教OPhone

2021-05-20 07:26:21

工具Vuex Vue.js

2014-06-04 10:42:34

Swift苹果iOS

2014-02-21 15:15:49

4G

2021-08-04 13:19:28

云原生存储编排

2017-08-01 15:25:41

LinuxNginxHttps

2021-10-19 10:52:06

Serverless阿里云

2014-02-10 16:27:09

百万级IOPSOceanStor 1

2014-04-22 10:49:25

上海移动4GF1大奖赛

2022-01-13 08:13:14

Vue3 插件Vue应用

2017-03-16 14:01:00

2010-08-16 09:48:38

无线局域网

2017-07-04 15:32:28

周年庆极速狂奔小米手机

2014-11-16 21:59:54

NETGEAR无线路由

2010-08-23 13:11:51

无线路由器配置

2021-11-26 00:02:00

模式正则修饰符

2020-08-12 09:48:24

大数据数据可视化技术

2010-06-02 08:53:51

.NET 4并行编程
点赞
收藏

51CTO技术栈公众号