這篇文章主要為大家介紹了關於在vue.js中引入vuex儲存介面資料及調用的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
前言
前幾天在慕課網上看到黃軼事老師的高仿餓了麼app視頻教程，在做接口設計的時候，我在想，這個介面能不能儲存下來全域呼叫呢？而不是走很多次接口，管理起來也很麻煩。
萬能的vue果然有這個功能，那就是vuex。
Vuex 是一個主要應用在中大型單頁應用的類似 Flux 的資料管理架構。它主要幫我們更好地組織程式碼，以及把應用程式內的狀態保持在可維護、可理解的狀態。
如果你不太理解 Vue.js 應用程式裡的狀態是什麼意思的話，你可以想像一下你先前寫的 Vue 元件裡面的 data 欄位。 Vuex 把狀態分成元件內部狀態和應用程式層級狀態：
元件內部狀態：僅在一個元件內使用的狀態(data 欄位)
應用層級狀態：多個元件共用的狀態
舉個例子：比如說有一個父元件，它有兩個子元件。這個父元件可以用 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>上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在vue.js中如何呼叫vuex儲存介面數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
