有關Vuex

首先要知道，咱們說的Vuex是什麼？

官方給出的解釋：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

好吧，看到這，相信不少人都會說：這是啥啊這。

開始我也是懵逼狀態，後來我想到了一個比方：

好比某年級有5個小班，每一個小班有25個同窗，可是隻有一個老師授課，假如5個小班就對應着5個組件，每一個班的25個同窗就至關於每一個組件中的25條數據，這個老師就至關於 vuex ，老師講的課就至關於每一條數據。要保證每一個同窗受到一樣的教育，就須要這個老師把每節課分別講5遍，還不能保證每一個班的同窗聽到的效果相同。一段時間後，老師以爲這樣特別麻煩還很累，就想了一個辦法，找了一個大教室，把這5個小班的同窗合併到一塊兒，這樣每一個課程只須要講一次就好啦，並且還保證了每一個班的同窗聽到的效果相同。這就是 vuex 的做用，把各個組件中用到的數據統一管理，同步發放，省時省心省力。

那這個 vuex 怎麼用呢？讓咱們從一個簡單的 Vue 計數應用開始

基本用法：

1. 初始化並建立一個項目

vue init webpack-simple vuex-demo
cd vuex-demo
npm install

2. 安裝 vuex

npm install vuex -S

3. 在 src 目錄下建立 store.js 文件，並在 main.js 文件中導入並配置

store.js 中寫入

import Vue from 'vue' //引入 vuex 並 use import Vuex from 'vuex' Vue.use(Vuex) 

main.js 文件

import Vue from 'vue' import App from './App.vue' import store from './assets/store' //導入 store 對象 new Vue({ //配置 store 選項，指定爲 store 對象，會自動將 store 對象注入到全部子組件中，在子組件中經過 this.$store 訪問該 store 對象 store, el: '#app', render: h => h(App) }) 

4. 編輯 store.js 文件

在應用 vuex 以前，咱們仍是須要看懂這個流程圖，其實很簡單。

vuex

① Vue Components 是咱們的 vue 組件， 組件會觸發（dispatch）一些事件或動做( Actions);
② 咱們在 組件中發出的動做，確定是想獲取或者改變數據的，可是在 vuex 中，數據是集中管理的，咱們不能直接去更改數據，因此會把這個動做提交（Commit）到 Mutations 中；
③ 而後 Mutations 就去改變（Mutate） State 中的數據；
④ 當 State 中的數據被改變以後，就會從新渲染（Render）到 Vue Components (組件)中去， Vue Components (組件)展現更新後的數據，完成一個流程。

Vuex 的 核心 是 Store（倉庫），至關因而一個容器，一個 Store 實例中包含如下屬性的方法：

state 定義屬性（狀態 、數據）
getters 用來獲取屬性
actions 定義方法（動做）
commit 提交變化，修改數據的惟一方式就是顯示的提交 mutations
mutations 定義變化，處理狀態（數據）的改變
mapGetters 用來獲取屬性（數據）
mapActions 用來獲取方法（動做）

store.js 中寫入

// 定義屬性（數據） var state = { count:6 } // 建立 store 對象 const store = new Vuex.Store({ state }) // 導出 store 對象 export default store; 

方式一、 在 app.vue 中就能經過 this.$store 訪問該 store 對象 ，獲取該 count 。

其中須要注意的是 this.$store 中的 store 與 main.js 中配置的 store 相對應，必定要注意大小寫

<template> <div id="app"> //把 count 方法直接寫入，可本身執行 <h1>{{count}}</h1> </div> </template> <script> export default { name: 'app', computed:{ count(){ //返回獲取到的數據 return this.$store.state.count } } } </script> 

執行

npm run dev

就能在頁面中看到傳過來的數據了

方式二、vuex 提供的 mapGetters 和 mapActions 來訪問

mapGetters 用來獲取屬性（數據）

① 在 app.vue 中引入 mapGetters

import {mapGetters} from 'vuex' 

② 在 app.vue 文件的計算屬性中調用 mapGetters 輔助方法，並傳入一個數組，在數組中指定要獲取的屬性 count

<script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ //此處的 count 與如下 store.js 文件中 getters 內的 count 相對應 'count' ]) } </script> 

③ 在 store.js 中定義 getters 方法並導出

getters 用來獲取屬性

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性（數據） var state = { count:6 } // 定義 getters var getters={ //須要傳個形參，用來獲取 state 屬性 count(state){ return state.count } } // 建立 store 對象 const store = new Vuex.Store({ state, getters }) // 導出 store 對象 export default store; 

這樣頁面上就會顯示傳過來的數據了！接下來咱們來經過動做改變獲取到的數據

④在 store.js 中定義 actions 和 mutations 方法並導出

actions 定義方法（動做）
commit 提交變化，修改數據的惟一方式就是顯示的提交 mutations
mutations 定義變化，處理狀態（數據）的改變

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定義屬性（數據） var state = { count:6 } // 定義 getters var getters={ count(state){ return state.count } } // 定義 actions ，要執行的動做，如流程的判斷、異步請求 const actions ={ // ({commit,state}) 這種寫法是 es6 中的對象解構 increment({commit,state}){ //提交一個名爲 increment 的變化，名字可自定義，能夠認爲是類型名，與下方 mutations 中的 increment 對應 //commit 提交變化，修改數據的惟一方式就是顯式的提交 mutations commit('increment') } } // 定義 mutations ，處理狀態（數據） 的改變 const mutations ={ //與上方 commit 中的 ‘increment’ 相對應 increment(state){ state.count ++; } } // 建立 store 對象 const store = new Vuex.Store({ state, getters, actions, mutations }) // 導出 store 對象 export default store; 

⑤ 在 app.vue 中引入 mapActions ，並調用

mapActions 用來獲取方法（動做）

import {mapGetters,mapActions} from 'vuex' 

調用 mapActions 輔助方法，並傳入一個數組，在數組中指定要獲取的方法 increment

<template> <div id="app"> //這個 increment 方法與下面 methods 中的 increment 相對應 <button @click="increment">增長</button> <button>減小</button> <h1>{{count}}</h1> </div> </template> <script> import {mapGetters,mapActions} from 'vuex' export default { name: 'app', computed:mapGetters([ 'count' ]), methods:mapActions([ //該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment 'increment', ]) } </script> 

這樣就能經過 button 來改變獲取到的 count 了。

如今你能夠經過 storel.state 來獲取狀態對象，以及經過 store.commit 方法觸發狀態變動

注意：咱們經過提交 mutation 的方式，而非直接改變 store.state.count ，是由於咱們想更明確地追蹤到狀態的變化。

這是經過點擊事件讓 count++ ，不妨本身試着寫一下 count-- 吧！

好了，確實很繞的，你們動腦子琢磨吧！