Day6状态管理 2024-09-02 阅读次数：

状态管理

在 Vue 中，状态管理主要是指对应用中数据的管理和维护。

组件内状态

在 Vue 组件中，可以通过 data 属性定义组件的内部状态。

export default {
    data() {
        return {
        count: 0,
        message: 'Hello Vue!'
        };
    }
};

计算属性是基于响应式数据依赖进行计算的属性。它们会根据其依赖的数据变化而自动更新。

export default {
    data() {
        return {
        a: 1,
        b: 2
        };
    },
    computed: {
        sum() {
        return this.a + this.b;
        }
    }
};

侦听器用于观察特定数据的变化，并执行相应的操作。

export default {
    data() {
        return {
            message: 'Hello'
        };
    },
    watch: {
        message(newValue, oldValue) {
            console.log(`Message changed from ${oldValue} to ${newValue}`);
        }
    }
};

全局状态管理（Vuex）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

主要包括五个核心概念：State（状态）、Getter（获取器）、Mutation（变更）、Action（动作）、Module（模块）。

State：存储应用的状态数据。

const state = {
    count: 0
};

Getter：可以对 State 进行计算和派生，类似于计算属性。

const getters = {
    doubleCount: state => state.count * 2
};

Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

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

Action：Action 可以包含任意异步操作，并通过提交 mutation 来间接更改状态。

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

Module：当应用变得复杂时，可以将 store 分割成模块，每个模块拥有自己的 state、mutation、action 和 getter。

const moduleA = {
    state: {... },
    mutations: {... },
    actions: {... },
    getters: {... }
};

const store = new Vuex.Store({
    modules: {
        a: moduleA
    }
});

使用Vuex

创建一个 store

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装
app.use(store)

现在，你可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更：

store.commit('increment')

console.log(store.state.count) // -> 1

在 Vue 组件中， 可以通过 this.$store 访问store实例。现在我们可以从组件的方法提交一个变更：

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

状态管理的重要性

• 提高可维护性：集中管理状态使得数据的来源更加清晰，便于跟踪和调试。
• 实现组件间通信：可以方便地在不同组件之间共享和同步状态，避免复杂的父子组件通信。
• 更好的代码组织：状态管理将数据与业务逻辑分离，使代码结构更加清晰和易于理解。