揭开 Vuex 的神秘面纱：深入了解其基本用法

前端

2024-01-16 09:29:06

Vuex 源码学习：第一章 - Vuex 基本用法

在浩瀚的 JavaScript 框架和库中，Vuex 闪耀着光芒，成为管理 Vue.js 应用程序状态的强大工具。在这一系列文章中，我们将踏上 Vuex 源码学习之旅，从其基本用法开始。

创建 Vuex 项目

创建 Vuex 项目就像在公园里散步一样简单：

安装 Vuex：npm install vuex
在 main.js 中引入 Vuex：import Vuex from 'vuex'
创建一个 Vuex 存储：const store = new Vuex.Store({})
将存储挂载到 Vue 根实例：Vue.use(store)

Vuex 工作流程

Vuex 遵循单向数据流模式：

状态：应用程序的状态存储在 Vuex 存储中。
动作：动作是对状态进行突变的函数。
分发器 ：分发器用于触发动作。
组件：组件通过 getters 从存储中获取状态，并使用动作更新状态。

基本用法

让我们用一个简单的示例来说明 Vuex 的基本用法：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count
    }
  },
  actions: {
    incrementCount(context) {
      context.commit('incrementCount')
    }
  },
  mutations: {
    incrementCount(state) {
      state.count++
    }
  }
})

在组件中：

// MyComponent.vue
<template>
  <button @click="incrementCount">+</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['incrementCount'])
  }
}
</script>