歡迎每一位愛學習的同學，小郭將用一篇文章為大家梳理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