前端小伙伴们在做vue开发的时候，一定会遇到需要在不同的页面组件中做状态管理，今天就来学习下vue状态管理库vuex。

1. Vuex介绍

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

• state：管理组件数据，数据是响应式的，当数据改变时驱动视图更新。
• mutations：更新数据，state中的数据只能使用mutations去改变数据（只能处理同步的场景）。
• actions：处理异步场景，处理成功后把数据提交给mutations，进而更新state。
• getters：相当于在State和组件之间添加一个环节（对state中的数据进行加工处理后再提供给组件）。
• modules：当应用变得非常复杂时，store对象可以被分割成模块。

2. 初始化项目

安装Vuex

在Vue.js项目中安装Vuex：

npm install vuex --save

创建store

创建一个store.js文件，并初始化Vuex：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

集成到Vue实例

在main.js中引入并使用store：

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

3. 使用Vuex

在组件中使用Vuex管理的状态：

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

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

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

4. Vuex的模块化（Modules）

对于大型应用，可以使用Vuex的模块化功能来组织代码：

// store/modules/counter.js
export default {
  state: { count: 0 },
  mutations: {
    increment(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
  }
});

在组件中使用模块化状态：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      count: state => state.counter.count
    })
  }
}

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦。