适合初学者的 Vue.js VueJs 部分使用 Vuex 进行状态管理-js教程-PHP中文网

适合初学者的 Vue.js VueJs 部分使用 Vuex 进行状态管理

Patricia Arquette

发布： 2024-10-16 12:24:29

原创

327 人浏览过

Vue.js for Beginners VueJs Part State Management with Vuex

随着应用程序的增长，管理 Vue.js 应用程序中的状态可能会变得复杂。在这篇文章中，我们将探索如何使用 Vuex（Vue.js 的官方状态管理库）有效地管理状态。

-什么是 Vuex？
Vuex 是 Vue.js 应用程序的状态管理模式库。它充当应用程序中所有组件的集中存储，使它们之间的数据共享变得更加容易。这有助于以可预测的方式管理状态。

- 安装 Vuex
要开始使用 Vuex，首先需要安装它。如果您使用的是 Vue CLI，则可以在创建项目时选择安装它。如果您已有项目，请通过 npm 安装它：

npm install vuex@next --save

登录后复制

设置 Vuex

- 创建商店
在 src 目录中创建一个名为 store 的新文件夹，并在该文件夹中创建一个名为 index.js 的文件。该文件将保存 Vuex 存储配置。在此示例中，我们将创建一个简单的存储来添加和减去计数值。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

登录后复制

- 将 Vuex 商店集成到您的应用程序
接下来，将 Vuex 存储集成到您的主 Vue 实例中。编辑你的 main.js 文件：

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

登录后复制

在组件中使用 Vuex

现在 Vuex 已经设置完毕，让我们看看如何在组件中使用它。这是如何从组件访问和修改状态的示例。

- 访问状态
您可以使用 this.$store.state:
访问状态

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

登录后复制