为初学者准备的Vuex必备基础知识

2023-12-14 09:28:11

Vuex是一个状态管理工具，它可以帮助您管理应用程序的状态，使您的应用程序更易于维护和测试。Vuex遵循Flux架构，它将应用程序的状态存储在集中管理的store中，并通过mutation来更新状态。

State

State是Vuex的核心概念之一，它存储了应用程序的状态数据。State是一个普通的JavaScript对象，它可以包含任何类型的数据，例如字符串、数字、数组、对象等。

const state = {
  count: 0
}

Mutation

Mutation是另一种核心概念，它可以用来更新State。Mutation是一个函数，它接收两个参数：State和payload。State是当前的State对象，payload是需要更新的数据。

const mutations = {
  increment(state, payload) {
    state.count += payload
  }
}

Action

Action是另一个重要的概念，它可以用来执行异步操作。Action是一个函数，它接收两个参数：context和payload。context包含了store的实例，payload是需要执行的操作。

const actions = {
  incrementAsync({ commit }, payload) {
    setTimeout(() => {
      commit('increment', payload)
    }, 1000)
  }
}

Getter

Getter是一种计算属性，它可以用来获取State中的数据。Getter是一个函数，它接收一个参数：State。

const getters = {
  doubleCount(state) {
    return state.count * 2
  }
}

完整案例代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 0
}

const mutations = {
  increment(state, payload) {
    state.count += payload
  }
}

const actions = {
  incrementAsync({ commit }, payload) {
    setTimeout(() => {
      commit('increment', payload)
    }, 1000)
  }
}

const getters = {
  doubleCount(state) {
    return state.count * 2
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

export default store