首頁 > web前端 > js教程 > 主體

在vue.js中如何呼叫vuex儲存介面數據

亚连
發布: 2018-06-20 17:15:48
原創
3184 人瀏覽過

這篇文章主要為大家介紹了關於在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="{&#39;current&#39;: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>
登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

使用React如何防止出現重複渲染

#在vue中如何實作directive功能

在nodejs中基於mssql模組如何實作封裝

在Javascript中如何實作bind

##在js中如何實現二級聯動

以上是在vue.js中如何呼叫vuex儲存介面數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!