Vuex access数据属性

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 中的数据属性主要通过 state、getters、mutations 和 actions 来管理。

基础概念

State: 定义了应用的状态数据，可以理解为组件之间共享的数据。
Getters: 类似于 Vue 组件中的计算属性，用于从 store 中获取状态。
Mutations: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Actions: 类似于 mutations，不同在于它们提交的是 mutations，而不是直接变更状态；可以包含任意异步操作。

优势

集中式存储管理：所有组件的状态集中管理，易于维护和调试。
状态变更可追踪：通过 mutations 来改变状态，使得状态变化可追踪。
组件解耦：组件不再直接修改状态，而是通过 actions 和 mutations 来间接修改，降低了组件间的耦合度。

类型

State: 应用的状态数据。
Getters: 从 state 中派生出一些状态，类似于计算属性。
Mutations: 同步修改 state 的方法。
Actions: 提交 mutations 或执行异步操作的方法。

应用场景

大型应用的状态管理：当应用变得复杂时，组件间的状态共享和数据传递变得困难，Vuex 提供了解决方案。
多个视图依赖同一状态：当多个视图需要共享同一状态时，Vuex 可以方便地进行管理。

示例代码

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

export default store;

// 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');

<!-- App.vue -->
<template>
  <div>
    Count: {{ count }}
    Double Count: {{ doubleCount }}
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment', 'incrementAsync'])
  }
};
</script>