Vue 2 使用vuex

在 Vue 2 中使用 Vuex 进行状态管理是一种常见的做法。Vuex 是专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。下面是使用 Vuex 的基本步骤：

安装 Vuex

首先确保你已经安装了 Vue 2，然后安装 Vuex：

Bash
深色版本
npm install vuex --save
# 或者
yarn add vuex

初始化 Vuex Store

创建一个 Vuex store 文件，通常命名为 store.js 或者 store/index.js：

Javascript
深色版本
// store/index.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++;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
  getters: {
    count(state) {
      return state.count;
    },
  },
});

在这个例子中，我们定义了一个简单的计数器状态 count，一个修改状态的方法 mutations，一个异步操作方法 actions，以及一个计算属性 getters。

在 Vue 应用中使用 Vuex

接下来，在你的 Vue 应用的入口文件（通常是 main.js）中引入并使用这个 store：

Javascript
深色版本
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 引入 store

new Vue({
  store, // 将 store 注入到 Vue 实例中
  render: h => h(App),
}).$mount('#app');

在组件中使用 Vuex

现在可以在组件中通过 this.$store 来访问 Vuex store：

Vue
深色版本
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.count;
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    },
  },
};
</script>

此外，也可以使用 Vuex 提供的辅助函数简化代码：

使用 mapState 和 mapGetters

Javascript
深色版本
import { mapState, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['count']), // 直接映射 state 到计算属性
    ...mapGetters(['count']), // 映射 getters 到计算属性
  },
  methods: {
    ...mapActions(['increment']), // 映射 actions 到 methods
  },
};

使用 Vuex 的模块化

对于大型应用，可以将 store 分成多个模块来更好地组织状态：

Javascript
深色版本
// store/modules/counter.js
const counterModule = {
  state: { count: 0 },
  mutations: { increment(state) { state.count++; } },
  actions: { increment({ commit }) { commit('increment'); } },
  getters: { count: state => state.count },
};

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    counter,
  },
});

然后在组件中使用模块时需要加上命名空间：

Javascript
深色版本
import { mapState, mapGetters, mapActions } from 'vuex';

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

这就是使用 Vuex 在 Vue 2 中进行状态管理的基本方法。根据你的应用规模和需求，还可以进一步扩展和优化这些配置。