vue.js 2, як дивитися значення магазину з vuex

Я використовую vuexі vuejs 2разом.

Я новачок vuex, хочу спостерігати за storeзміною змін.

Я хочу додати watchфункцію в своюvue component

Ось що я маю досі:

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

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

Я хочу знати, чи є якісь зміни в my_state

Як я дивлюся store.my_stateв своєму компоненті vuejs?

Скажімо, наприклад, що у вас є кошик з фруктами, і кожного разу, коли ви додаєте або виймаєте фрукти з кошика, ви хочете (1) відобразити інформацію про кількість фруктів, але ви також (2) хочете отримувати повідомлення про підрахунок плодів у якийсь фантазійний спосіб ...

фрукти-кол-компонент.вью

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

Зверніть увагу, що ім'я функції в watchоб'єкті повинно відповідати імені функції в computedоб'єкті. У прикладі вище назва count.

Нові та старі значення властивості, що спостерігається, будуть передані у зворотний виклик годинника (функція підрахунку) як параметри.

Магазин кошиків може виглядати так:

фрукти-кошик.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

Ви можете прочитати більше в наступних ресурсах:

• Обчислені властивості та спостереження
• Документи API: обчислено
• Документи API: дивіться

Не слід використовувати спостережники компонентів для прослуховування змін у стані. Я рекомендую вам скористатися функціями getters, а потім зіставити їх всередині вашого компонента.

import { mapGetters } from 'vuex'

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

У вашому магазині:

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

Ви повинні мати можливість слухати будь-які зміни, внесені у ваш магазин, використовуючи this.myStateу своєму компоненті.

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

Це так просто, як:

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

Як було сказано вище, не годиться спостерігати за змінами безпосередньо в магазині

Але в деяких дуже рідкісних випадках комусь це може бути корисно, тому я залишу цю відповідь. Для інших випадків див. Відповідь @ gabriel-robert

Це можна зробити через state.$watch. Додайте це у свій created(або там, де вам це потрібно виконати) метод у компоненті

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

Детальніше: https://vuex.vuejs.org/api/#watch

Я думаю, що запитувач хоче використовувати годинник з Vuex.

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

      },
      {
        deep:true
      }
      );

Це для всіх людей, які не можуть вирішити свою проблему з дітьми, і насправді дуже потрібен спостерігач, наприклад, щоб поспілкуватися з сторонніми сторонніми матеріалами (див. Vue Watchers про те, коли користуватися спостерігачами).

Оглядачі та обчислені значення компонента Vue також працюють на обчислені значення. Так що з 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);
        }
    }
}

якщо мова йде лише про поєднання локального та глобального стану, документ mapState також надає приклад:

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

якщо ви використовуєте машинопис, ви можете:

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

..

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

Створіть локальну змінну вашого магазину, переглянувши та встановивши зміни цінності. Таким чином, що зміна локальної змінної для v-моделі форм-вводу не мутує безпосередньо змінну сховища .

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

Найкращий спосіб спостерігати за змінами магазину - це використовувати, mapGettersяк сказав Габріель. Але є випадок, коли ви не можете це зробити, mapGettersнаприклад, ви хочете отримати щось із магазину за допомогою параметра:

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

у такому випадку ви не можете користуватися mapGetters. Ви можете спробувати зробити щось подібне замість цього:

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

Але, на жаль, todoById буде оновлюватися, лише якщо this.idбуде змінено

Якщо ви хочете оновити компоненти в такому випадку, використовуйте this.$store.watch рішення, надане Гонгом . Або обробляйте свій компонент свідомо та оновлюйте, this.idколи вам потрібно оновити todoById.

Якщо ви просто хочете подивитися на державну власність , а потім діяти в рамках компонента в відповідно до зміни цієї властивості тоді дивіться приклад нижче.

В store.js:

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

У цьому сценарії я створюю booleanдержавну власність, яку я хочу змінити в різних місцях програми так:

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

Тепер, якщо мені потрібно переглянути цю власність у якомусь іншому компоненті, а потім змінити локальну власність, я напишу наступне на mountedгачку:

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

По-перше, я встановлюю спостерігач на властивість стану, а потім у функції зворотного дзвінка використовую valueцю властивість для зміни localProperty.

Я сподіваюся, що це допомагає!

Коли ви хочете дивитися на державному рівні, це можна зробити так:

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

Ви можете використовувати комбінацію Vuex дій , видобувачів , обчислених властивості і спостерігачів слухати зміни на державному значенні Vuex.

HTML-код:

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

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

Див. Демонстрацію JSFiddle .

Ви також можете підписатися на мутації магазину:

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

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

Всередині компонента створіть обчислену функцію

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

Тепер назву обчисленої функції можна спостерігати, як

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

Зміни, внесені в vuexстан my_state, відобразяться в обчислюваній функції myStateі запускають функцію годинника.

Якщо в штаті my_stateє вкладені дані, то цей handlerваріант допоможе більше

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

Це дозволить переглянути всі вкладені значення в магазині my_state.

Ви також можете використовувати mapState у своєму компоненті vue, щоб напряму отримувати стан з магазину.

У вашому компоненті:

computed: mapState([
  'my_state'
])

Де my_stateє змінна від магазину.

Я використовував цей спосіб, і це працює:

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
}

І у своєму компоненті, де ви використовуєте стан від магазину:

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

Коли користувач подає форму, дія STORE буде викликана , після створеного успіху після цього здійснюється мутація CREATE_SUCCESS . Поворот createSuccess є істинним, і в компоненті спостерігач побачить, що значення змінилося і запустить сповіщення.

isSuccess повинен відповідати імені, яке ви заявляєте в getters.js