vue.js 2 vuex'ten mağaza değerlerini izleme

Birlikte vuexve vuejs 2birlikte kullanıyorum .

Ben yeniyim vuex, storedeğişken bir değişiklik izlemek istiyorum .

Bu watchişlevivue component

Şimdiye kadar sahip olduğum şey bu:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

Ben herhangi bir değişiklik olup olmadığını bilmek istiyorum my_state

store.my_stateVuejs bileşenimde nasıl izlerim ?

Örneğin, bir meyve sepetiniz olduğunu ve sepete her meyve eklediğinizde veya sepetten her meyve çıkardığınızda (1) meyve sayısı hakkında bilgi görüntülemek istediğinizi, ancak (2) bazı süslü bir şekilde meyve sayısı ...

Meyve-sayımı-component.vue

<template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

watchNesnedeki işlevin adının, computednesnedeki işlevin adıyla eşleşmesi gerektiğini lütfen unutmayın . Yukarıdaki örnekte adı count.

İzlenen bir özelliğin yeni ve eski değerleri, parametre olarak geri izleme (sayım işlevi) öğesine aktarılır.

Sepet dükkanı şöyle görünebilir:

Meyve-basket.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

Aşağıdaki kaynaklardan daha fazla bilgi edinebilirsiniz:

• Hesaplanmış özellikler ve gözlemciler
• API dokümanları: bilgisayarlı
• API belgeleri: izle

Durum değişikliğini dinlemek için bileşenin izleyicilerini kullanmamalısınız. Alıcı işlevlerini kullanmanızı ve bunları bileşeninizin içinde eşlemenizi öneririm.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

Mağazanızda:

const getters = {
  getMyState: state => state.my_state
}

this.myStateBileşeninizi kullanarak mağazanızda yaptığınız değişiklikleri dinleyebilmeniz gerekir .

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

Bu kadar basit:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

Yukarıda belirtildiği gibi, değişiklikleri doğrudan mağazada izlemek iyi bir fikir değildir

Ama bazı çok nadir durumlarda birisi için yararlı olabilir, bu yüzden bu cevabı bırakacağım. Diğer durumlar için lütfen @ gabriel-robert cevabına bakınız.

Bunu yapabilirsiniz state.$watch. Bunu created, bileşeninizde (veya bunun yürütülmesi gereken yere) yönteminize ekleyin

this.$store.watch(
    function (state) {
        return state.my_state;
    },
    function () {
        //do something on data change
    },
    {
        deep: true //add this if u need to watch object properties change etc.
    }
);

Daha fazla detay: https://vuex.vuejs.org/api/#watch

Bence asker Vuex ile saat kullanmak istiyor.

this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );

Bu, sorunlarını alıcılarla çözemeyen ve aslında gerçekten bir izleyiciye ihtiyaç duyan tüm insanlar içindir, örneğin vue olmayan üçüncü taraflarla konuşmak için (bkz. Vue Watchers gözlemcileri ne zaman kullanılacağı hakkında).

Vue bileşeninin izleyicileri ve hesaplanan değerlerin her ikisi de hesaplanan değerler üzerinde çalışır. Bu yüzden vuex ile farklı değil:

import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState(['somestate']),
        someComputedLocalState() {
            // is triggered whenever the store state changes
            return this.somestate + ' works too';
        }
    },
    watch: {
        somestate(val, oldVal) {
            // is triggered whenever the store state changes
            console.log('do stuff', val, oldVal);
        }
    }
}

yalnızca yerel ve küresel durumu birleştirmekle ilgiliyse , mapState'in dokümanı da bir örnek sunar:

computed: {
    ...mapState({
        // to access local state with `this`, a normal function must be used
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
    }
})

typescript kullanıyorsanız şunları yapabilirsiniz:

import { Watch } from "vue-property-decorator";

..

@Watch("$store.state.something")
private watchSomething() {
   // use this.$store.state.something for access
   ...
}

Değer değişikliklerini izleyip ayarlayarak mağaza değişkeninizin Yerel durumunu oluşturun . Form-giriş v-modeli için yerel değişken değişiklikleri , depo değişkenini doğrudan değiştirmez .

data() {
  return {
    localState: null
  };
 },
 computed: {
  ...mapGetters({
    computedGlobalStateVariable: 'state/globalStateVariable'
  })
 },
 watch: {
  computedGlobalStateVariable: 'setLocalState'
 },
 methods: {
  setLocalState(value) {
   this.localState = Object.assign({}, value);
  }
 }

Mağaza değişikliklerini izlemenin en iyi yolu mapGettersGabriel'in dediği gibi kullanmaktır . Ancak bunu yapamadığınız bir durum var, mapGettersörneğin parametre kullanarak mağazadan bir şey almak istiyorsunuz:

getters: {
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

bu durumda kullanamazsınız mapGetters. Bunun yerine böyle bir şey yapmaya çalışabilirsiniz:

computed: {
    todoById() {
        return this.$store.getters.getTodoById(this.id)
    }
}

Ancak maalesef todoById yalnızca this.iddeğiştirilirse güncellenecek

Böyle bir durumda bileşen güncellemesini istiyorsanız this.$store.watch , Gong tarafından sağlanan çözümü kullanın . Veya bileşeninizi bilinçli bir şekilde kullanın ve güncellemeniz this.idgerektiğinde güncelleyin todoById.

Sadece bir devlet mülkünü izlemek istiyorsanız ve ardından bu özelliğin değişikliklerine göre bileşen içinde hareket aşağıdaki örneğe bakın.

İçinde store.js:

export const state = () => ({
 isClosed: false
})
export const mutations = {
 closeWindow(state, payload) {
  state.isClosed = payload
 }
}

Bu senaryoda, ben booleanböyle uygulamada farklı yerlerde değişecek bir devlet özelliği oluşturuyorum :

this.$store.commit('closeWindow', true)

Şimdi, ben bu özelliği başka bir bileşen izlemek ve sonra yerel özelliği değiştirmek gerekiyorsa ben mountedkanca aşağıdaki yazmak istiyorum :

mounted() {
 this.$store.watch(
  state => state.isClosed,
  (value) => {
   if (value) { this.localProperty = 'edit' }
  }
 )
}

İlk olarak, state özelliği üzerinde bir izleyici ayarlıyorum ve sonra geri arama işlevinde ben valuedeğiştirmek için bu özelliği kullanın localProperty.

Umut ediyorum bu yardım eder!

Eyalet düzeyinde izlemek istediğinizde, bu şekilde yapılabilir:

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});

Vuex durum değerindeki değişiklikleri dinlemek için Vuex eylemlerini , alıcıları , hesaplanan özellikleri ve izleyicileri bir arada kullanabilirsiniz .

HTML Kodu:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

JavaScript Kodu:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

JSFiddle demosuna bakın .

Mağaza mutasyonlarına da abone olabilirsiniz:

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

https://vuex.vuejs.org/api/#subscribe

Bileşenin içinde, hesaplanmış bir işlev oluşturun

computed:{
  myState:function(){
    return this.$store.state.my_state; // return the state value in `my_state`
  }
}

Şimdi hesaplanan işlev adı,

watch:{
  myState:function(newVal,oldVal){
    // this function will trigger when ever the value of `my_state` changes
  }
}

Yapılan değişiklikler vuexdevlet my_statebilgisayarlı işlevinde yansıtacaktır myStateve saat fonksiyonu tetikler.

Devlet ise my_stateiç içe verilere sahip, o handlerseçenek daha yardımcı olacaktır

watch:{
  myState:{
    handler:function(newVal,oldVal){
      // this function will trigger when ever the value of `my_state` changes
    },
    deep:true
  }
}

Bu, mağazadaki tüm iç içe değerleri izleyecektir my_state.

Mağazadan alma durumunu yönlendirmek için vue bileşeninizde mapState'i de kullanabilirsiniz.

Bileşeninizde:

computed: mapState([
  'my_state'
])

my_stateMağazadan bir değişken nerede .

Bu şekilde kullandım ve işe yarıyor:

store.js:

const state = {
  createSuccess: false
};

mutations.js

[mutations.CREATE_SUCCESS](state, payload) {
    state.createSuccess = payload;
}

actions.js

async [mutations.STORE]({ commit }, payload) {
  try {
    let result = await axios.post('/api/admin/users', payload);
    commit(mutations.CREATE_SUCCESS, user);
  } catch (err) {
    console.log(err);
  }
}

getters.js

isSuccess: state => {
    return state.createSuccess
}

Ve mağazadan durumu kullandığınız bileşeninizde:

watch: {
    isSuccess(value) {
      if (value) {
        this.$notify({
          title: "Success",
          message: "Create user success",
          type: "success"
        });
      }
    }
  }

Kullanıcı form gönderdiğinde, oluşturulan MAĞAZA eylemi çağrılır , bundan sonra CREATE_SUCCESS mutasyonu işlenir . Çevirin createSuccess doğrudur ve bileşende, izleyici değer değişti ve tetik bildirim gelmiştir göreceksiniz.

isSuccess , getters.js'de bildirdiğiniz adla eşleşmelidir