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. } 
22. </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. } 
22. </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. } 
37. </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. } 
21. </script> 

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

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