快捷導(dǎo)航

vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的詳細(xì)流程

更新時(shí)間：2017年12月14日 10:09:54 作者：藍(lán)調(diào)爵士

這篇文章主要給大家介紹了關(guān)于在vue.js中引入vuex儲(chǔ)存接口數(shù)據(jù)及調(diào)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

前幾天在慕課網(wǎng)上看到黃軼老師的高仿餓了么app視頻教程，在做接口設(shè)計(jì)的時(shí)候，我在想，這個(gè)接口能不能儲(chǔ)存下來(lái)全局調(diào)用呢？而不是走很多次接口，管理起來(lái)也麻煩。

萬(wàn)能的vue果然有這個(gè)功能，那就是vuex。

Vuex 是一個(gè)主要應(yīng)用在中大型單頁(yè)應(yīng)用的類似于 Flux 的數(shù)據(jù)管理架構(gòu)。它主要幫我們更好地組織代碼，以及把應(yīng)用內(nèi)的的狀態(tài)保持在可維護(hù)、可理解的狀態(tài)。

如果你不太理解 Vue.js 應(yīng)用里的狀態(tài)是什么意思的話，你可以想象一下你此前寫的 Vue 組件里面的 data 字段。Vuex 把狀態(tài)分成組件內(nèi)部狀態(tài)和應(yīng)用級(jí)別狀態(tài)：

組件內(nèi)部狀態(tài)：僅在一個(gè)組件內(nèi)使用的狀態(tài)(data 字段)
應(yīng)用級(jí)別狀態(tài)：多個(gè)組件共用的狀態(tài)

舉個(gè)例子：比如說(shuō)有一個(gè)父組件，它有兩個(gè)子組件。這個(gè)父組件可以用 props 向子組件傳遞數(shù)據(jù)，這條數(shù)據(jù)通道很好理解。

具體的實(shí)現(xiàn)流程，當(dāng)然是先安裝了

npm install vuex --save（推薦使用淘寶鏡像cnpm，具體實(shí)施請(qǐng)自行百度）

然后建立個(gè)store.js的文件來(lái)管理數(shù)據(jù)

里面的內(nèi)容是這樣的

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
 },
 actions:{
 },
 mutations:{
 }
})

然后在main.js里面引入這個(gè)js文件

import store from './store.js'

然后就開始請(qǐng)求數(shù)據(jù)了，在mutations這個(gè)屬性里寫上

mutations:{
  getJson(){
   Vue.http.get('../data.json',{
    },{
    headers:{},
    emulateJSON:true
    }).then(response=>{
    this.state.newslist=response.data;
    },response=>{
     
    })
  }
 }

在這里寫這樣寫是為了讓actions調(diào)然后把數(shù)據(jù)存在state里面的，官網(wǎng)說(shuō)這個(gè)是異步存數(shù)據(jù)，我理解的這個(gè)異步就跟ajax的異步加載一個(gè)意思，當(dāng)然同步就是mutations了。但是異步的數(shù)據(jù)先寫在mutations里面然后才能調(diào)用，所以就得在actions里面這樣寫

actions:{
  newJson(obj){
   obj.commit('getJson');
  }
 },

然后把把state寫成這樣

state:{
  newslist:[]
 },

這么寫的目的是為了不報(bào)錯(cuò)，免得出現(xiàn)什么找不到之類的錯(cuò)誤。

上面的newJson跟obj是我自定義的，你可以隨便寫，getJson就是mutations里面你要用的方法，方便等會(huì)分流用,這個(gè)getJson方法也可以加參數(shù)的，但參數(shù)必須是state，這個(gè)state就是上面state，不是自定義的。寫死。

接下來(lái)在你的子組件里面就可以分流啦！

子組件里的代碼是這樣的：

import {mapState} from 'vuex';
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

在這里我自定義了個(gè)goods來(lái)代替state.newslist.goods，因?yàn)槲业臄?shù)據(jù)是

{
"goods":[]
}

這種格式，我嫌長(zhǎng)，就縮短了下。

然后在html里面就可以直接調(diào)用了，這里貼一小塊代碼

<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>

基本上流程就是這樣

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: