溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
前幾天在慕課網上看到黃軼老師的高仿餓了么app視頻教程，在做接口設計的時候，我在想，這個接口能不能儲存下來全局調用呢？而不是走很多次接口，管理起來也麻煩。
萬能的vue果然有這個功能，那就是vuex。
Vuex 是一個主要應用在中大型單頁應用的類似于 Flux 的數據管理架構。它主要幫我們更好地組織代碼，以及把應用內的的狀態保持在可維護、可理解的狀態。
如果你不太理解 Vue.js 應用里的狀態是什么意思的話，你可以想象一下你此前寫的 Vue 組件里面的 data 字段。Vuex 把狀態分成組件內部狀態和應用級別狀態：
舉個例子：比如說有一個父組件，它有兩個子組件。這個父組件可以用 props 向子組件傳遞數據，這條數據通道很好理解。
具體的實現流程，當然是先安裝了
npm install vuex --save（推薦使用淘寶鏡像cnpm，具體實施請自行百度）
然后建立個store.js的文件來管理數據
里面的內容是這樣的
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
},
actions:{
},
mutations:{
}
})
然后在main.js里面引入這個js文件
import store from './store.js'
然后就開始請求數據了，在mutations這個屬性里寫上
mutations:{
getJson(){
Vue.http.get('../data.json',{
},{
headers:{},
emulateJSON:true
}).then(response=>{
this.state.newslist=response.data;
},response=>{
})
}
}
在這里寫這樣寫是為了讓actions調然后把數據存在state里面的，官網說這個是異步存數據，我理解的這個異步就跟ajax的異步加載一個意思，當然同步就是mutations了。但是異步的數據先寫在mutations里面然后才能調用，所以就得在actions里面這樣寫
actions:{
newJson(obj){
obj.commit('getJson');
}
},
然后把把state寫成這樣
state:{
newslist:[]
},
這么寫的目的是為了不報錯，免得出現什么找不到之類的錯誤。
上面的newJson跟obj是我自定義的，你可以隨便寫，getJson就是mutations里面你要用的方法，方便等會分流用,這個getJson方法也可以加參數的，但參數必須是state，這個state就是上面state，不是自定義的。寫死。
接下來在你的子組件里面就可以分流啦！
子組件里的代碼是這樣的：
import {mapState} from 'vuex';
computed:{
...mapState({
goods:state=>state.newslist.goods,
classMap:state=>state.classMap
})
}
在這里我自定義了個goods來代替state.newslist.goods，因為我的數據是
{
"goods":[]
}
這種格式，我嫌長，就縮短了下。
然后在html里面就可以直接調用了，這里貼一小塊代碼
<ul>
<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
<span class="text border-1px">
<span class="icon" v-show="item.type>0">
</span>
{{item.name}}
</span>
</li>
</ul>
基本上流程就是這樣
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
