vue.js 2 cara menonton nilai toko dari vuex

Saya menggunakan vuexdan vuejs 2bersama - sama.

Saya baru vuex, saya ingin menonton storeperubahan variabel.

Saya ingin menambahkan watchfungsi divue component

Inilah yang saya miliki sejauh ini:

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

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

Saya ingin tahu apakah ada perubahan dalam my_state

Bagaimana saya menonton store.my_statedi komponen vuejs saya?

Katakanlah, misalnya, bahwa Anda memiliki sekeranjang buah-buahan, dan setiap kali Anda menambah atau menghapus buah dari keranjang, Anda ingin (1) menampilkan info tentang jumlah buah, tetapi Anda juga (2) ingin diberi tahu hitungan buah dalam beberapa mode mewah ...

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

Harap dicatat, bahwa nama fungsi di watchobjek, harus cocok dengan nama fungsi di computedobjek. Dalam contoh di atas namanya count.

Nilai baru dan lama dari properti yang ditonton akan diteruskan ke panggilan balik panggilan (fungsi hitungan) sebagai parameter.

Toko keranjang bisa terlihat seperti ini:

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

Anda dapat membaca lebih lanjut di sumber-sumber berikut:

• Properti dan pengamat yang dihitung
• API API: dihitung
• API API: tonton

Anda tidak harus menggunakan pengamat komponen untuk mendengarkan perubahan status. Saya sarankan Anda untuk menggunakan fungsi getter dan memetakannya di dalam komponen Anda.

import { mapGetters } from 'vuex'

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

Di toko Anda:

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

Anda harus dapat mendengarkan perubahan apa pun yang dilakukan di toko Anda dengan menggunakan this.myState komponen Anda.

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

Sesederhana:

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

Seperti disebutkan di atas, bukan ide yang baik untuk menonton perubahan secara langsung di toko

Tetapi dalam beberapa kasus yang sangat jarang mungkin bermanfaat bagi seseorang, jadi saya akan meninggalkan jawaban ini. Untuk kasus lain, silakan lihat jawaban @ gabriel-robert

Anda dapat melakukan ini state.$watch. Tambahkan ini dalam createdmetode Anda (atau di mana Anda perlu ini dieksekusi) dalam komponen

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.
    }
);

Lebih detail: https://vuex.vuejs.org/api/#watch

Saya pikir si penanya ingin menggunakan arloji dengan Vuex.

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

      },
      {
        deep:true
      }
      );

Ini untuk semua orang yang tidak dapat menyelesaikan masalah mereka dengan getter dan sebenarnya sangat membutuhkan pengamat, misalnya untuk berbicara dengan hal-hal pihak ketiga yang tidak terkait (lihat Vue Watchers tentang kapan harus menggunakan pengamat).

Pengamat komponen Vue dan nilai yang dihitung keduanya juga bekerja pada nilai yang dihitung. Jadi tidak berbeda dengan vuex:

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);
        }
    }
}

jika hanya tentang menggabungkan keadaan lokal dan global, dokumen mapState juga memberikan contoh:

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

jika Anda menggunakan naskah maka Anda dapat:

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

..

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

Buat status lokal variabel toko Anda dengan menonton dan mengatur perubahan nilai. Sedemikian rupa sehingga perubahan variabel lokal untuk input-bentuk v-model tidak secara langsung bermutasi variabel toko .

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

Cara terbaik untuk menonton perubahan toko adalah menggunakan mapGettersseperti yang dikatakan Gabriel. Tetapi ada kasus ketika Anda tidak bisa melakukannya mapGettersmisalnya Anda ingin mendapatkan sesuatu dari toko menggunakan parameter:

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

dalam hal ini Anda tidak dapat menggunakan mapGetters. Anda dapat mencoba melakukan sesuatu seperti ini sebagai gantinya:

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

Namun sayangnya todoById akan diperbarui hanya jika this.iddiubah

Jika Anda ingin Anda memperbarui komponen dalam this.$store.watch solusi kasus penggunaan seperti yang disediakan oleh Gong . Atau tangani komponen Anda secara sadar dan perbarui this.idsaat Anda perlu memperbarui todoById.

Jika Anda hanya ingin menonton sebuah milik negara dan kemudian bertindak dalam komponen sesuai dengan perubahan properti yang kemudian melihat contoh di bawah ini.

Di store.js:

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

Dalam skenario ini, saya membuat booleanproperti negara yang akan saya ubah di berbagai tempat dalam aplikasi seperti:

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

Sekarang, jika saya perlu menonton properti negara bagian itu di beberapa komponen lain dan kemudian mengubah properti lokal saya akan menulis yang berikut di mountedhook:

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

Pertama, saya mengatur pengamat pada properti negara dan kemudian dalam fungsi panggilan balik saya menggunakan valueproperti itu untuk mengubah localProperty.

Saya harap ini membantu!

Ketika Anda ingin menonton di tingkat negara bagian, itu bisa dilakukan dengan cara ini:

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

Anda dapat menggunakan kombinasi tindakan Vuex , getter , properti yang dihitung , dan pengamat untuk mendengarkan perubahan pada nilai status Vuex.

Kode HTML:

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

Kode JavaScript:

'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()}`)
    }
  }
})

Lihat demo JSFiddle .

Anda juga dapat berlangganan mutasi toko:

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

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

Di dalam komponen, buat fungsi yang dikomputasi

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

Sekarang nama fungsi yang dihitung dapat ditonton, seperti

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

Perubahan yang dibuat di vuexnegara bagian my_stateakan mencerminkan fungsi yang dihitungmyState dan memicu fungsi arloji.

Jika negara my_statememiliki data bersarang, maka handleropsi akan membantu lebih banyak

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

Ini akan menonton semua nilai bersarang di toko my_state.

Anda juga dapat menggunakan mapState di komponen vue Anda untuk mengarahkan status dari store.

Di komponen Anda:

computed: mapState([
  'my_state'
])

Di mana my_statevariabel dari toko.

Saya menggunakan cara ini dan berhasil:

store.js:

const state = {
  createSuccess: false
};

mutations.js

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

action.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
}

Dan di komponen Anda di mana Anda menggunakan status dari toko:

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

Saat pengguna mengirimkan formulir, tindakan STORE akan dipanggil, setelah berhasil dibuat, mutasi CREATE_SUCCESS dilakukan setelah itu. Hidupkan createSuccess benar, dan dalam komponen, pengamat akan melihat nilai telah berubah dan memicu pemberitahuan.

isSuccess harus sesuai dengan nama yang Anda nyatakan di getters.js