首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vuex的四个常用核心概念

Vuex的四个常用核心概念解读

2024-11-08 11:36:22 作者：帅气的小苏

本文详细解析了Vuex中的四个核心概念及其区别,包括State用于存储状态,Getters用于计算属性并缓存,Mutations是唯一更改State的同步方法,Actions则用于提交Mutations且支持异步操作

Vuex的四个常用核心概念

在 Vuex 中，state, getters、mutations 和 actions 是四个个核心概念，而同学们时常会搞乱其中的某些概念和用法, 这里统一讲解一下

State

首先，我们要明确 Vuex 的核心概念 state。

State 是 Vuex 中用于存储应用状态的对象。

这些状态是响应式的，当它们改变时，视图会自动更新。

Getters

这里同学就有疑问了, vuex 的 state 明明可以直接进行访问，为什么要画蛇添足的加一个 Getters 呢？

其实: Getters 是用于从 state 中派生出一些状态，例如对 state 中的数据进行过滤或计算新的值。

与直接返回 state 的值相比，getter 的返回值会根据它的依赖进行缓存。

只有在相关依赖发生改变时才会重新求值。(说人话就是减少计算成本, 提高性能)

用法：

在 store 中定义 getter：

const store = new Vuex.Store ({  
  state: {  
    todos: [  
      { id: 1, text: '...', done: true },  
      { id: 2, text: '...', done: false }  
    ]  
  },  
  getters: {  
    doneTodos: state => {  
      return state.todos.filter (todo => todo. done)  
    }  
  }  
})

在组件中使用 getter：

computed: {  
  doneTodos () {  
    return this.$store. getters. doneTodos  
  }  
}

Mutations

Mutations 是 Vuex 中用于更改 state 的唯一方法（记住, 是唯一的哟）。

Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

const store = new Vuex.Store ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      // 变更状态  
      state.count++  
    }  
  }  
})
在组件中提交 mutation：

javascript
methods: {  
  increment () {  
    this.$store.commit ('increment')  
  }  
}

Actions

那么 actions 和 mutations 有什么区别呢?

Actions 类似于 mutations，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
当需要在 state 上执行异步操作或者执行一批 mutations 时，你可以使用 actions。

用法：

在 store 中定义 action：

const store = new Vuex.Store ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      state. count++  
    }  
  },  
  actions: {  
    incrementAsync ({ commit }) {  
      setTimeout (() => {  
        commit ('increment')  
      }, 1000)  
    }  
  }  
})

在组件中分发 action：

methods: {  
  incrementAsync () {  
    this.$store.dispatch('incrementAsync')  
  }  
}

注意：

在 actions 中，你可以通过 context 对象来访问 commit 方法（或其他 Vuex 属性）。

为了方便，我们可以直接解构 commit 出来，就像上面的例子那样。

总结

State：存储应用的状态。
Getters：基于 state 计算属性，并可以缓存结果。
Mutations：直接更改 state 的唯一方式，且必须是同步函数。
Actions：类似于 mutations，用于提交 mutations，可以包含任意异步操作。

这四个概念共同构成了 Vuex 的核心功能，使得状态管理在 Vue 应用中变得清晰、可预测和可维护。

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

Vuex的四个常用核心概念解读