適合初學者的 Vue.js VueJs 部分使用 Vuex 進行狀態管理-js教程-PHP中文網

適合初學者的 Vue.js VueJs 部分使用 Vuex 進行狀態管理

Patricia Arquette

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

原創

294 人瀏覽過

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>

登入後複製