vuex を呼び出してインターフェイス データを vue.js に保存する方法

この記事では、vue.js での vuex ストレージ インターフェイス データと呼び出しの導入に関する関連情報を主に紹介し、サンプル コードを通じて詳細に紹介します。これは、あらゆる人の学習や仕事に必要です。ぜひ編集者をフォローして一緒に学んでください。

前書き

数日前、MOOCでHuang Yi先生の模倣度の高いEle.meアプリのビデオチュートリアルを見て、このインターフェースを保存してグローバルに呼び出すことができるかどうか疑問に思いました。布？インターフェースを何度も経由する代わりに、管理も面倒です。

ユニバーサル vue にはこの機能があります、つまり vuex です。

Vuex は、主に中規模および大規模の単一ページ アプリケーションで使用される、Flux に似たデータ管理アーキテクチャです。これは主に、コードをより適切に整理し、アプリケーション内の状態を保守可能で理解可能な状態に保つのに役立ちます。

Vue.js アプリケーションの状態が何を意味するのかよくわからない場合は、前に作成した Vue コンポーネントのデータ フィールドを想像してください。 Vuex は、状態をコンポーネントの内部状態とアプリケーション レベルの状態に分割します。

• コンポーネントの内部状態: 1 つのコンポーネント (データ フィールド) 内でのみ使用される状態

• アプリケーション レベルの状態: 複数のコンポーネントによって共有される状態

例: 2 つの子コンポーネントを持つ親コンポーネントがあるとします。この親コンポーネントは 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=>{
     
    })
  }
 }

を記述します。これは、アクションがデータを調整して状態に保存できるようにするためにここに記述されています。データの保存は、ajax の非同期読み込みと同じ意味であることは理解しています。 もちろん、同期とは突然変異を意味します。ただし、非同期データは最初にミューテーションに書き込まれてから呼び出すことができるため、アクションでこのように記述する必要があります

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

次に、状態を次のように記述する必要があります

state:{
  newslist:[]
 },

これを記述する目的は、エラーの報告を避けることです。忘れ物を避ける。

上記の newJson と obj は自由に記述できます。 getJson は後でパラメータを追加することもできますが、パラメータは state である必要があります。この状態は上記の状態で、カスタマイズされていません。死ぬまで書きましょう。

次に、サブコンポーネントでフローを分割できます。

サブコンポーネントのコードは次のとおりです:

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

ここで、データが

{
"goods":[]
}

の形式であるため、state.newslist.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でディレクティブ関数を実装する方法

nodejsのmssqlモジュールに基づいたカプセル化を実装する方法

バインドの実装方法Javascript で

js で二次リンケージを実現する方法

以上がvuex を呼び出してインターフェイス データを vue.js に保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。