vuex是一個專門為vue.js設計的集中式狀態(tài)管理架構(gòu)。簡單的說就是data中需要共用的屬性恢总。比如：我們有幾個頁面要顯示用戶名稱和用戶等級整胃，或者顯示用戶的地理位置。如果我們不把這些屬性設置為狀態(tài)利朵，那每個頁面遇到后，都會到服務器進行查找計算沃琅，返回后再顯示哗咆。在中大型項目中會有很多共用的數(shù)據(jù)蜘欲，所以就有了vuex益眉。
引入vuex
1.利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就可以了郭脂。
npm install vuex --save
如果是mac用戶沒有權(quán)限的話在前面加上sudo
sudo npm install vuex --save
如果電腦沒有翻墻的話可以使用國內(nèi)的淘寶鏡像cnpm年碘，速度飛起來了。
需要注意的是這里一定要加上 –save展鸡，因為你這個包我們在生產(chǎn)環(huán)境中是要使用的屿衅。
2.新建一個vuex文件夾（這個不是必須的），并在文件夾下新建store.js文件莹弊，文件中引入我們的vue和vuex涤久。
import Vue from 'vue';
import Vuex from 'vuex';
3.使用我們vuex，引入之后用Vue.use進行引用忍弛。
Vue.use(Vuex);
通過這三步的操作响迂，vuex就算引用成功了，接下來我們就可以盡情的玩耍了细疚。
入門小Demo
我們這個小案例先聲明一個state的count狀態(tài)蔗彤，在頁面中使用顯示這個count，然后可以利用按鈕進行加減疯兼，如果你看過我的文章然遏，你一定知道，在我們學基礎知識 的時候經(jīng)常編寫這個程序吧彪。我們來張圖片幫大家回憶一下待侵。
就是這個程序，不過我們這次要用的是vuex來進行制作来氧，并實現(xiàn)數(shù)據(jù)的共享傻谁。
1.現(xiàn)在我們store.js文件里增加一個常量對象幽邓。store.js文件就是我們在引入vuex時的那個文件。
const state={
count:1
}
2.用export default 封裝代碼，讓外部可以引用弧呐。
export default new Vuex.Store({
state
})
3.新建一個vue的模板，位置在components文件夾下探遵，名字叫count.vue淌喻。在模板中我們引入我們剛建的store.js文件，并在模板中用{{$store.state.count}}輸出count 的值瞄摊。
<template>
<div>
<h2>{{msg}}</h2>
<hr/>
<h3>{{$store.state.count}}</h3>
</div>
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
msg:'Hello Vuex',
}
},
store
}
</script>
4.在store.js文件中加入兩個改變state的方法勋又。
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
mutations是固定的寫法，意思是改變的
5.在count.vue模板中加入兩個按鈕换帜，并調(diào)用mutations中的方法楔壤。
<div>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</div>
state訪問狀態(tài)對象
一、通過computed的計算屬性直接賦值
computed屬性可以在輸出前惯驼，對data中的值進行改變蹲嚣，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值递瑰。
computed:{
count(){
return this.$store.state.count;
}
}
二、通過mapState的對象來賦值
我們首先要用import引入mapState隙畜。
import {mapState} from 'vuex';
然后還在computed計算屬性里寫如下代碼：
computed:mapState({
count:state=>state.count
})
這里我們使用ES6的箭頭函數(shù)來給count賦值抖部。
Mutations修改狀態(tài)
$store.commit( )
Vuex提供了commit方法來修改狀態(tài)，我們粘貼出第一節(jié)課的代碼內(nèi)容议惰，簡單回顧一下慎颗，我們在button上的修改方法。
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
store.js文件：
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
模板獲取Mutations方法
在模板count.vue里用import 引入我們的mapMutations：
import { mapState,mapMutations } from 'vuex';
在模板的<script>標簽里添加methods屬性言询，并加入mapMutations
methods:mapMutations([
'add','reduce'
]),
通過上邊兩部俯萎，我們已經(jīng)可以在模板中直接使用我們的reduce或者add方法了，就像下面這樣运杭。
<button @click="reduce">-</button>
