vue store 如何存储值

在 Vue 中，使用 Vuex 进行状态管理可以高效地存储和管理应用的状态。1、通过定义状态和变更函数来存储值，2、使用 getters 和 actions 来访问和修改这些值，3、遵循单一状态树的原则来集中管理应用的所有状态。

一、定义状态和变更函数

在 Vuex 中，状态存储在 state 对象中，可以通过变更函数（mutations）来修改这些状态。以下是一个简单的例子：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setCount(state, newCount) {
      state.count = newCount;
    }
  }
});

定义状态：在 state 对象中定义需要存储的值，例如 count。
变更函数：在 mutations 对象中定义变更函数，例如 increment 和 setCount，这些函数用于修改状态。

二、访问和修改状态

通过 getters 和 actions 可以访问和修改状态。getters 用于计算派生状态，actions 用于提交变更函数并可以包含异步操作。

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setCount(state, newCount) {
      state.count = newCount;
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

访问状态：通过 getters 定义派生状态，例如 doubleCount。
修改状态：通过 actions 进行异步操作并提交变更函数，例如 incrementAsync。

三、在组件中使用状态

在 Vue 组件中可以通过 mapState、mapGetters、mapMutations 和 mapActions 辅助函数来访问和修改 Vuex 状态。

// MyComponent.vue
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
};
</script>

访问状态：通过 mapState 将状态映射到组件的计算属性中。
访问派生状态：通过 mapGetters 将派生状态映射到组件的计算属性中。
提交变更函数：通过 mapMutations 将变更函数映射到组件的方法中。
提交异步操作：通过 mapActions 将异步操作映射到组件的方法中。

四、单一状态树原则

Vuex 采用单一状态树的原则，即将应用的所有状态集中存储在一个对象中。这样可以更好地管理和调试应用状态。

// store.js
export default new Vuex.Store({
  state: {
    user: {
      name: '',
      age: 0
    },
    products: []
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setProducts(state, products) {
      state.products = products;
    }
  },
  getters: {
    userName: state => state.user.name,
    userAge: state => state.user.age,
    productCount: state => state.products.length
  },
  actions: {
    fetchUser({ commit }) {
      // 模拟异步操作
      setTimeout(() => {
        const user = { name: 'John', age: 30 };
        commit('setUser', user);
      }, 1000);
    },
    fetchProducts({ commit }) {
      // 模拟异步操作
      setTimeout(() => {
        const products = [{ id: 1, name: 'Product A' }, { id: 2, name: 'Product B' }];
        commit('setProducts', products);
      }, 1000);
    }
  }
});

集中管理：所有状态集中存储在 state 对象中，如 user 和 products。
状态变更：通过变更函数（mutations）来修改状态。
派生状态：通过 getters 来计算和访问派生状态。
异步操作：通过 actions 来处理异步操作并提交变更函数。

总结和建议

通过使用 Vuex，可以高效地管理 Vue 应用的状态，实现集中式状态管理。以下是一些建议：

保持状态单一：尽量将所有状态集中在一个对象中，避免分散存储。
使用变更函数：所有状态修改应通过变更函数（mutations）进行，确保状态变更可追踪。
合理使用异步操作：在 actions 中处理异步操作，并在操作完成后提交变更函数。
利用派生状态：通过 getters 计算和访问派生状态，避免在组件中进行复杂的状态计算。

通过这些方法，可以提高应用的可维护性和可扩展性，使状态管理更加清晰和可靠。