備注：此案例是用vue腳手架創(chuàng)建的demo
1浦箱、首先要知道什么是Vuex?
在Vue官方網(wǎng)站的解釋是： Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式吸耿。?它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化??
2酷窥、使用Vuex時咽安，常見的關鍵詞
1、store：倉庫容器蓬推， 包含應用中大部分的狀態(tài) (state)
2妆棒、state：數(shù)據(jù)狀態(tài)
3、mutations：更改 Vuex 的 store 中狀態(tài)的唯一方法是提交 mutation
4沸伏、commit： 調用?store.commit?方法糕珊，觸發(fā) mutation
5、mapState：借助mapState輔助函數(shù)獲取store中保存的狀態(tài)毅糟，避免當一個組件需要獲取多個狀態(tài)的時候红选，將這些狀態(tài)都聲明為計算屬性時代碼冗余
3、組件及模塊的分配
1留特、main.js：主模塊
2纠脾、store.js：管理倉庫
3、state.js：數(shù)據(jù)狀態(tài)
4蜕青、mutations.js：更改 Vuex 的 store 中數(shù)據(jù)狀態(tài)
5苟蹈、template.vue：組件渲染
備注：為了方便以后代碼的修改，我將state和mutations從store中抽離出來右核，單獨做了模塊慧脱，使用時直接在store中引用
4、Vuex的使用
（1）贺喝、安裝vuex菱鸥，在工作目錄下執(zhí)行命令：
npm install vuex --save
（2）宗兼、創(chuàng)建store，狀態(tài)管理倉庫：store.js
import? Vue? from? 'vue'
import? Vuex? from? 'vuex'?
Vue.use(Vuex)
import? state? from? 'state.js路徑'
import? mutations? from? 'mutations.js路徑'? ?
const? store? =? new? Vuex.Store({
????????????state,mutations
})
export? default? store
（3）氮采、創(chuàng)建state.js
//定義狀態(tài)管理數(shù)據(jù)
//user 記錄用戶的登錄信息
const state = {
? ? ? ? user:localStorage.user?JSON.parse(localStorage.user):'',
}
export? default? state
（4）創(chuàng)建mutations.js
//更改 Vuex 的 store 中狀態(tài)的唯一方法是提交 mutation殷绍，Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數(shù) (handler)。這個回調函數(shù)就是我們實際進行狀態(tài)更改的地方鹊漠，并且它會接受 state 作為第一個參數(shù)
const? mutations? =? {
? ? ? ? ? onLogin(state){ //更改state中的user數(shù)據(jù)
? ? ? ? ? ? ? ? ?state.user = JSON.parse(localStorage.user);
? ? ? ? ? },
}
export default mutations
（5）主到、在main.js中引入store
import? ?Vue? from? 'vue'
import? App? from? './App'
import? router? from? './router'
import? store? from? 'store.js路徑'
Vue.config.productionTip? =? false
new Vue({
? ? ? el: '#app',
? ? ? router,
? ? ? store,
? ? ? template: '<App/>'
? ? ? ?components: { App }
})
（6）、在template.vue組件中使用
<template>
? ? ? ? <div class='app-footer'>
? ? ? ? ? ? ? ? ?<div v-if='_user'>
? ? ? ? ? ? ? ? ? ? ? ? ? <span>購物車</span>
? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ? <button @click="onToLogin">立即登錄</button>
? ? ? ? </div>
</template>
<script>
? ? ? ? ? ?import? ?{mapState}? ?from? ?'vuex'
? ? ? ? ? ?export? default{
? ? ? ? ? ? ? ? name:' app-footer ',
? ??????????????/*
????????????????//方法1
????????????????computed:{//計算屬性躯概，動態(tài)獲取state數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ?user(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return? ? this.$store.state.user;
? ? ? ? ? ? ? ? ? ? ? ? ?},
????????????????},
????????????????*/
????????????????/*
????????????????//方法2
????????????????//當一個組件需要獲取多個狀態(tài)的時候登钥，將這些狀態(tài)都聲明為計算屬性,方法1會產(chǎn)生代碼冗余，可以借助mapState輔助函數(shù)獲取store中保存的狀態(tài)
????????????????computed:mapState(['user']),
????????????????*/
????????????????/*
????????????????//方法3
????????????????//方法2中娶靡，當組件本身的數(shù)據(jù)名與state中的數(shù)據(jù)名重復時牧牢，這時很容易造成數(shù)據(jù)混亂，為了不破壞state中原有的數(shù)據(jù)姿锭，在使用mapState函數(shù)時可以傳入一個對象,給state數(shù)據(jù)起一個別名
????????????????computed:mapState({
????????????????????????//_user:'user',? ? //方法1：key-value鍵值對形式塔鳍，key為別名，value為state里對應的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ?_user(state){? ? ?//方法2：函數(shù)形式艾凯，函數(shù)名為別名献幔，參數(shù)為state，返回值為state里對應的數(shù)據(jù)名
????????????????????????????????return state.user;
????????????????????????}
????????????????}),
????????????????*/
????????????????//方法4
????????????????//如果我們在組件中有很多自己的業(yè)務邏輯需要計算屬性趾诗，我們可以用對象展開運算符
? ??????????????computed:{
????????????????????????userStr(){//自己的業(yè)務邏輯
????????????????????????????????return JSON.stringify(this.$store.state.user);
????????????????????????},
? ? ? ? ? ? ? ? ? ? ? ? ? ...mapState({//展開運算符蜡感，獲取state數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?_user(state){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?return state.user;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? ? },
? ??????????????????methods:{//登錄事件，更改state的user信息
? ??????????????????????????onToLogin(){
? ??????????????????????????????????localStorage.user = JSON.stringify({nick:'FamilyLi',user:'Hello',id:1})
? ??????????????????????????????????this.$store.commit('onLogin');//注意恃泪，這里的參數(shù)應該對應mutations里的事件屬性
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
????????????????????},
? ? ? ? ? ?}
</script>
