VUE遠位フレーム状態管理の詳細-vuex

馬の！多くの注目 - より多くの貴重なアドバイスありがとうございました〜

理解vuex

ストレージの集中管理。リアルタイム監視を観察するためのルールをカスタマイズする管理コンポーネントの状態、および変更の価値があります。

状態モード管理の理解

プロパティ	理解
状態	データ・ソース・ドライブ・アプリケーション
見る	宣言的、状態が表示されマッピングします
行動	入力状態の変化におけるユーザビュー（ビュー）の結果に応じて。

ここに画像を挿入説明

new Vue({
  // state 驱动应用的数据源
  data(){
    return {
      count:0
    }
  },
  //  view 以声明的方式，将 state 映射到视图 
 template: `<div> {{ count }} </div>`,
  // actions 响应在 view（视图）上的用户输入导致的状态变化。
  methods: {
    add(){
      this.count ++ 
    }
  }
})

vuexインストール導入

使用前にダウンロードする必要がvuex

npm install vuex --save

次に、グローバルオブジェクトストアVUEのインスタンスに導入された、我々は、ファイルが「./store」から内側インポートストアに追加され、main.js文書ファイルに導入しました。

import Vue from 'vue'
import App from './App'
import router from 'router'
import store from './stroe'
Vue.config.productionTip = false;
new Vue({
    el:'#app',
    store,
    router,
    componment:{ App },
    template:'<App/>
})

次に作成し、srcディレクトリの下にストアディレクトリを作成index.jsは、ストアディレクトリの下に次のコードを記述します

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    
})
export default store;//导出store

1.vuex 4つのコアプロパティ

状態：データソース

私たちは、あなたがこの介してデータを取得することができ、ここで定義および格納されたデータを保存する必要があります。アセンブリで$ STORE.STATE

まずindex.jsはストアディレクトリに以下のコードを書きます

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    }
})
export default store;//导出store

その後、我々は我々のデータ数を取得するには、この。$ STORE.STATE方法でコンポーネントのいずれかを使用することができます

<template>
    <div>
        {{ this.$store.state.count }}  //1.页面调用
        {{ msg }} //2.方法赋值
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                msg : null
            }
        },
        mounted(){
            this.msg = this.$store.state.count;
        }
    }
<script/>

ゲッター：コンピュープロパティ

計算プロパティで計算ゲッター同等VUE、ゲッターは、値がキャッシュされているその依存関係に基づいて行われます返す、とのみ再計算されますときに我々はゲッターを定義することにより、状態の値を監視することができ、彼の依存値が変化し、変更は、結果を返します。

まずindex.jsはストアディレクトリに以下のコードを書きます

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
})
export default store;//导出store

コンポーネントページでゲット

<template>
    <div>
        {{ this.$store.state.count }}  // count 值：1
        {{ this.$store.getters.getStateCount }}  //调用getters  值：2
    </div>
</template>

変異：イベントハンドラ

当社は、取得するデータページにあるが、我々はのカウント値を変更する必要がある場合はどのように行うには？あなたがこの方法の唯一の値を変更する必要がある場合は修正する店舗に変異を提出することです。

シンプルなイベントの例、またはストア/ index.jsで

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
    mutations:{
        add:state => state.count++,
        red:state => state.count--
    }
})
export default store;//导出store

この中で使用される部品。$ Store.commit（「変異イベント名」）このメソッドが呼び出されます

<template>
    <div>
        <p>{{ count }}<p/>
        <p>
            <button @click='add'></button>
            <button @click='red'></button>
        </p>
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                count: 1,
            }
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods: {
            add(){
                this.$store.commit('add')
            },
            red(){
                this.$store.commit('red')
            },
    }
</script>

アクション：機能コンポーネントには、イベントハンドラの変異を駆動するために、使用することができます

上記の研究を通して、私たちは状態の値を変更する方法を学びました。しかし、この公式は、私たちが店内値を変更するために直接行くことを示唆しているが、のは、送信アクションを手放すことではなく、状態の突然変異を起こしたアクションは、値を変更するために行きます。

したがって、我々は提出するアクションの機能変異を定義する必要があります。

import Vue from 'vue'   //引入vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex);
//创建Vuex实例
const store = new Vuex.Store({
    state:{
        count:1,    //定义数据源
    },
    getters:{
        getStateCount: state => state.count+1 //观测
    },
    mutations:{
        add:state => state.count++,
        red:state => state.count--
    },
    actions:{
        addFn(context) {
            context.commit('add');
        },
        redFn(context) {
            context.commit('red')
        }
})
export default store;//导出store

その後、同じ効果が、それでも厳密に公式の文言を遵守する必要があり、コンポーネントファイルを編集します。

<template>
    <div>
        <p>{{ count }}<p/>
        <p>
            <button @click='addFn'></button>
            <button @click='redFn'></button>
        </p>
    </div>
</template>
<script>
    export default {
        name : 'home',
        data () {
            return {
                count: 1,
            }
        },
        computed: {
            count () {
                return this.$store.state.count
            }
        },
        methods: {
            addFn(){
                this.$store.dispatch('addFn')
            },
            redFn(){
                this.$store.dispatch('redFn')
            },
    }
</script>

vuexプロパティモジュールがあります：モジュラーデータストレージ（必須ではありません）

2.vuex拡大

mapState
mapGetters
mapActions

頻繁方法とデータストアに呼び出された当社の開発プロセスでは、この時間はこれを使用して。$ STORE.STATE及びその他の言葉遣いは非常に肥大化になります、すべてここmapState、mapGetters、mapActionsを導入しました。

コンポーネントの導入では、状態管理にvuex使用する必要があります。

import { mapState、mapGetters、mapActions } from 'vuex';
    .
    .
    .
    computed:{
        ...mapState({
            count : state => state.count
        })
    }

このケースでは、同じページ数の呼び出しの効果を使用します。