构建简易版Vuex

2023-10-24 22:25:43

绪论

在实际项目开发中，随着应用程序的不断扩展和组件数量的不断增加，对于组件之间状态的共享和维护往往会成为一个棘手的问题。Vuex是一个常用的状态管理库，它可以帮助我们轻松维护应用程序的状态，实现跨组件通信。

构建简易版Vuex

首先，我们需要创建一个名为store.js的文件，并在其中定义我们的Store类。Store类将负责维护应用程序的状态，并提供对状态的访问和修改操作。

class Store {
  constructor(state) {
    this._state = state;
  }

  get state() {
    return this._state;
  }

  commit(mutation, payload) {
    this._state = mutation(this._state, payload);
  }

  dispatch(action, payload) {
    action(this, payload);
  }
}

接下来，我们需要定义我们的第一个mutation和action。Mutation用于修改状态，而action用于处理异步操作。

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

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

然后，我们需要创建一个Vuex实例，并将其注入到Vue应用程序中。

const store = new Store({
  count: 0
});

const app = new Vue({
  store
});

现在，我们可以在组件中使用$store来访问和修改状态。

<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>