Vuex state中同步数据和异步数据方式

我是阳光的菠菜

Vuex state中同步数据和异步数据

在 Vuex 中，数据存储主要通过

1. state

复制代码

来实现，而数据的修改则通过

1. mutations

复制代码

和

1. actions

复制代码

来管理。

1. mutations

复制代码

用于同步地修改状态，而

1. actions

复制代码

则用于处理异步操作，并在异步操作完成后提交

1. mutations

复制代码

来修改状态。

同步数据（State 和 Mutations）

• State：Vuex 的
  1. state

  复制代码
  属性定义了应用的状态。
  
• 它类似于组件中的
  1. data

  复制代码
  属性，但它是全局的，可以被所有组件访问。
  

1. const store = new Vuex.Store({
   
2.   state: {
   
3.     count: 0
   
4.   }
   
5. });

复制代码

• Mutations：
  1. mutations

  复制代码
  是修改
  1. state

  复制代码
  的唯一途径。
  
• 它们必须是同步函数，因为 Vuex 的调试工具依赖于跟踪
  1. mutations

  复制代码
  的调用顺序。
  

1. const store = new Vuex.Store({
   
2.   state: {
   
3.     count: 0
   
4.   },
   
5.   mutations: {
   
6.     increment(state) {
   
7.       state.count++;
   
8.     }
   
9.   }
   
10. });

复制代码

异步数据（Actions）

• Actions：
  1. actions

  复制代码
  用于处理异步操作。
  
• 它们可以包含任意异步操作，如 API 调用，然后在操作完成后提交
  1. mutations

  复制代码
  来修改状态。
  

1. const store = new Vuex.Store({
   
2.   state: {
   
3.     count: 0
   
4.   },
   
5.   mutations: {
   
6.     increment(state) {
   
7.       state.count++;
   
8.     }
   
9.   },
   
10.   actions: {
    
11.     asyncIncrement({ commit }) {
    
12.       setTimeout(() => {
    
13.         commit('increment');
    
14.       }, 1000);
    
15.     }
    
16.   }
    
17. });

复制代码

区别

• 同步 vs 异步：
  1. mutations

  复制代码
  必须是同步的，这意味着在
  1. mutations

  复制代码
  处理函数中执行的任何操作都必须是立即生效的。而
  1. actions

  复制代码
  可以包含异步操作，它们可以在提交
  1. mutations

  复制代码
  之前执行异步代码。
  
• 调试：由于
  1. mutations

  复制代码
  是同步的，Vuex 的调试工具可以准确地跟踪状态的变化。而异步操作可能会导致状态变化的时间点不明确，因此
  1. actions

  复制代码
  不直接修改状态，而是通过提交
  1. mutations

  复制代码
  来修改。
  
• 使用场景：当你需要执行同步操作来修改状态时，应该使用
  1. mutations

  复制代码
  。当你需要执行异步操作（如 API 调用）时，应该使用
  1. actions

  复制代码
  ，并在异步操作完成后提交
  1. mutations

  复制代码
  。
  

在实际应用中，理解并正确使用

1. mutations

复制代码

和

1. actions

复制代码

对于维护 Vuex 状态管理的一致性和可维护性至关重要。
通过这种方式，可以确保状态的变化是可预测的，并且可以被有效地跟踪和调试。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3267574qj.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！