【转】[Vue] VueX 的使用

来自：kimi.ai

在 Vue.js 中，Vuex 是一个专为 Vue 应用设计的状态管理模式，用于集中管理应用的状态。Vuex 的核心概念包括 State、Getters、Mutations 和 Actions。以下是对这些概念的详细解释以及它们的用法示例。

1. State

state 是 Vuex 中存储应用状态的地方。它类似于 Vue 组件中的 data，但它是全局共享的。

示例代码

JavaScript复制

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

export default createStore({
  state: {
    count: 0
  }
});

2. Getters

getters 是 Vuex 中的计算属性，用于从 state 中派生出一些状态。它们类似于 Vue 组件中的 computed 属性。

示例代码

JavaScript复制

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

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

在组件中使用 getters：

vue复制

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

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

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

3. Mutations

mutations 是用于修改 state 的唯一方式。它们是同步的，并且必须是纯函数（即不能有副作用）。mutations 通常接收两个参数：state 和 payload。

示例代码

JavaScript复制

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

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
    setCount(state, payload) {
      state.count = payload;
    }
  }
});

在组件中触发 mutations：

vue复制

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="setCount(10)">Set Count to 10</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment', 'decrement', 'setCount'])
  }
};
</script>

4. Actions

actions 类似于 mutations，但它们可以包含异步操作。actions 不能直接修改 state，而是通过调用 mutations 来修改 state。

示例代码

JavaScript复制

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

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
    setCount(state, payload) {
      state.count = payload;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    },
    setCount({ commit }, payload) {
      commit('setCount', payload);
    },
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

在组件中触发 actions：

vue复制

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="setCount(10)">Set Count to 10</button>
    <button @click="asyncIncrement">Async Increment</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement', 'setCount', 'asyncIncrement'])
  }
};
</script>

5. Modules

在大型应用中，Vuex 的状态树可能会变得非常庞大。为了更好地管理状态，Vuex 允许将状态树分割成模块（modules）。每个模块拥有自己的 state、mutations、actions 和 getters。

示例代码

JavaScript复制

// store/modules/counter.js
const counterModule = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count += 1;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

export default counterModule;

在主 store 中引入模块：

JavaScript复制

// store/index.js
import { createStore } from 'vuex';
import counterModule from './modules/counter';

export default createStore({
  modules: {
    counter: counterModule
  }
});

在组件中使用模块中的状态和方法：

vue复制

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

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

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

总结

• state：存储应用的状态。
• getters：从 state 中派生出一些状态，类似于 Vue 的 computed 属性。
• mutations：同步地修改 state，必须是纯函数。
• actions：可以包含异步操作，通过调用 mutations 来修改 state。
• modules：将状态树分割成模块，便于管理大型应用的状态。

通过合理使用这些功能，你可以更好地管理 Vue 应用中的状态。