Vuex的五大核心详细讲解

Vuex是Vue.js的官方状态管理库，它可以帮助我们在组件之间管理共享的状态。本篇文章将详细讲解VueX的五大核心，并提供相应的示例。

State

State是Vuex的核心，它包含了多个应用级别的状态。它通常被称为store，并且通常放置在src/store/index.js中：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

export default store

该示例中，state包含了一个count属性，它默认的初始值为0。我们可以在组件中通过$store.state.count来访问它。

Getters

Getters用于对State进行计算，因为在Vuex中不允许直接操作State。Getters可以被认为是store的计算属性。

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

在该示例中，我们定义了一个doneTodos Getter，它会返回所有已完成的任务。我们可以在组件中通过$store.getters.doneTodos来访问它。

Mutations

Mutations用于修改State。它们以同步方式响应来自组件的指令，并更改State的状态。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在该示例中，我们定义了一个increment Mutation，它会将count属性的值加1。我们可以在组件中通过$store.commit('increment')来调用它。

Actions

Actions允许异步修改State。它们负责处理异步任务（比如从服务器获取数据），在执行一个或多个Mutations之前执行一些任务。可以认为Actions是Mutations的异步版本。

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

在该示例中，我们定义了一个incrementAsync Action，它会在500毫秒后调用increment Mutation。我们可以在组件中通过$store.dispatch('incrementAsync')来调用它。

Modules

Modules允许我们分割Store中的内容为多个子模块，每个子模块拥有自己的State，Getters，Mutations，Actions和子模块。当应用程序变得庞大时，Modules能够帮助我们保持Store的模块化。

const store = new Vuex.Store({
  modules: {
    account: {
      state: {
        username: '',
        email: ''
      },
      mutations: {
        setUsername (state, username) {
          state.username = username
        },
        setEmail (state, email) {
          state.email = email
        }
      },
      actions: {
        login ({ commit }, { username, email }) {
          commit('setUsername', username)
          commit('setEmail', email)
        }
      },
      getters: {
        isLoggedIn (state) {
          return state.username !== '' && state.email !== ''
        }
      }
    }
  }
})

在该示例中，我们定义了一个account Module，它包含了一个username属性和一个email属性，一个login Action和两个Mutations。我们还定义了一个isLoggedIn Getter，它会返回用户是否已经登录。

以上就是Vuex的五大核心详细讲解，希望可以帮助你更好的理解Vuex的工作原理。