活用Vuex：通俗易懂的Vuex原理与实战讲解

前端

2023-11-19 20:44:31

在当今的Web开发中，状态管理变得日益重要。Vuex作为一款专门为Vue.js设计的轻量级状态管理工具，脱颖而出。它为我们提供了一个中心化的存储空间，使我们可以轻松地管理应用状态，并使应用的数据流更加清晰。

那么，Vuex是如何运作的呢？让我们从原理开始说起。

Vuex原理

Vuex的核心在于一个称为"store"的对象，它包含了整个应用的数据。这个store可以被任何组件访问，而组件也可以通过"actions"来触发状态变更。

store ：store是Vuex的核心，它是一个包含了整个应用状态的"单一真相来源"。这个store本质上是一个JSON对象，它的属性就是应用的不同状态。
actions ：actions允许我们更改store中的状态。这些动作可以由组件中的事件或其他动作触发。
mutations ：mutations是唯一能够更改store状态的方法。它们是同步的，并且总是与store状态一起使用。
getters ：getters允许我们从store中获取状态。它们就像computed properties，但可以访问store中的状态。

Vuex应用

了解了Vuex的基本原理，让我们看看如何将其应用到实际项目中。

准备环境 ：首先，我们需要在项目中安装Vuex。可以使用以下命令：

npm install vuex

实现目的 ：在main.js文件中，我们需要创建一个Vuex store。

import Vuex from 'vuex';

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

export default store;

App.vue内使用自写的vuex ：最后，我们在App.vue文件中导入store并使用它。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import store from './store'

export default {
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    incrementAsync () {
      store.dispatch('incrementAsync')
    }
  }
}
</script>