欢迎每一位爱学习的同学，小郭将用一篇文章为大家梳理Vue.js 中 vuex 知识点。请大家准备，精彩内容向下看。

Vuex 是什么？

先来看看官方解释：

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

看完官方解释作为一个前端菜鸟还是一脸懵（），但对于vuex的应用场景，大家可能或多或少知道，用来管理一些全局数据，或者多个页面都会使用到的数据，比如，我们项目中常见的用户信息，通常使用vuex来管理。

这里，我们思考一个问题，如何没有vuex，还有哪些方式可以实现一些公共数据的管理？

1. 把公共数据存储到根实例中，其他页面都可以通过 this.$root 来获取根实例中的数据。
2. 把公共数据存储到根实例中，其他页面通过 provide/inject 机制来获取根实例中的数据。

以上两种方式，虽然可以用来管理我们的全局数据，但是随着项目越来越复杂，全局数据越来越多，目前这样的管理方式成本还是有些高，所以，我们需要一套系统化的，流程化的机制来管理全局数据，而vuex就是为此而诞生的。

vuex的优点：它不仅仅是一个全局数据的管理器，同时它最大的特性是支持响应式的，也就是说使用vuex管理的数据如果发生改变，那么引入这些数据的组件都会自动刷新。

vuex基本使用

第一步：安装vuex

<code>npm i vuex --save/<code>

第二步：引入vuex

<code>//main.js import App from './App.vue' 
Vue.config.productionTip = false //vuex的使用 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
const store = new Vuex.Store({ 
  //所有的数据都存放在state中 
  state: { count: 0 }, 
  //mutations实现同步操作 
  mutations: { 
    increment (state, params) { 
      state.count += params;
    } 
  }, 
  //actions中实现一些异步操作 
  actions: { 
    increment ({state}, params) { 
      setTimeout(() => { 
        state.count += params; }, 3000) 
    }
  }, 
  getters: { 
    doubleCount (state) { 
      return state.count * 2; 
    } 
  } 
});  

new Vue({ 
  store, 
  render: h => h(App), 
}).$mount('#app')/<code>

<code>//app.vue 
<template> 
  
 
    count: {{count}} 
\t\t<button>count++/<button> 
\t\t
 
      doubleCount: {{doubleCount}} 
\t\t<button>count++/<button> 
\t
 
/<template> 
/<code>

由于篇幅的原因，本文暂停于此，想继续了解vuex更多的知识点，请移步到公众号“一郭鲜”，阅读完整的vuex知识梳理。

想学习更多前端知识、想获取更多前端资料欢迎关注公众号“一郭鲜”，学习前端不迷路

閱讀更多 一郭鮮 的文章

關鍵字: Vuex Vue doubleCount