Vuex - daniel-qa/Vue GitHub Wiki

Vuex

  • 什麼是 Vuex？

Vuex 是專為 Vue.js 應用程式設計的狀態管理库。 提供了一個集中式的儲存(store)來管理應用程式的所有组件的狀態 ，並以一種可預測的方式發出狀態更新。

簡單來說，Vuex 就是一個存放應用程式所有狀態的容器，並且具備一套完整的機制來管理狀態的變更。

  • 為什麼需要 Vuex？

狀態集中管理： 所有组件的狀態都存放在一個地方，方便管理和追踪。

狀態變更可追蹤： 狀態的變更只能通過 mutations 進行，確保狀態變更的可預測性。

複雜應用狀態管理： 對於大型應用，Vuex 可以有效地管理複雜的應用狀態。

Vuex 的核心概念

概念 描述
State 這是你的應用程式的數據源。
Mutations 這是唯一可以改變 state 的方法，並且必須是同步的。
Actions Actions 可以包含任意異步操作，並最終通過 commit mutation 來更新 state。
Getters 可以從 state 中衍生出一些計算屬性，方便組件使用。
Modules 將 Vuex store 拆分成更小的、可管理的模組。

Vuex 的基本使用範例

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  store,
  template: `
    <div>
      <p>You clicked button {{ count }} times.</p>
      <button @click="increment">+</button>
    </div>
  `,
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    }
  }
})

說明

  • 在 Vue 组件中，有一个 computed 属性定义了一个计算属性 count：
computed: {
  count () {
    return this.$store.state.count
  }
}

这个计算属性从 Vuex Store 的 state 中获取 count 的值。每当 state.count 发生变化时，computed 属性会自动更新，触发视图的重新渲染。

  • uex Store 的 mutations

当用户点击按钮时，increment 方法被调用：

methods: {
  increment () {
    this.$store.commit('increment')
  }
}

在这个方法中，调用了 this.$store.commit('increment')，这会触发 Vuex Store 中的 increment mutation：

mutations: {
  increment (state) {
    state.count++
  }
}

在这个 mutation 中，state.count 的值增加 1。

  • 更新和传递值

当 count 的值通过 mutation 更新后，Vue 的响应式系统会自动检测到这个变化。由于 count 是在 computed 属性中引用的，Vue 会重新计算这个值，并更新视图。

基本範例

  • 建立 store:
// store.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  }
});

export default store;
  • 在 Vue 應用中使用 Vuex:
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');
  • 在組件中使用 Vuex:

vue

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
};
</script>
⚠️ **GitHub.com Fallback** ⚠️