vuejs 2 Как смотреть хранить значения из vuex

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

фруктово-счет-компонент.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, yaay!`)
    }
  }
}
</script>

обратите внимание, что имя функции в watch объект, должен соответствовать имени функции в computed "объект". В пример выше имя count.

новые и старые значения наблюдаемого свойства будут переданы в watch callback (функция 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
    }
  }
  // Obvously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

вы можете прочитать больше в следующих ресурсах:

• вычисленные свойства и наблюдатели
• API docs: вычислено
• API docs: watch

как уже упоминалось выше, это не очень хорошая идея, чтобы смотреть изменения непосредственно в магазине

но в некоторых очень редких случаях это может быть полезно для кого-то, так что я оставлю этот ответ. Для других случаев, пожалуйста, см. @gabriel-robert answer

вы можете сделать это через state.$watch. Добавьте это в свой created (или где u нужно это выполнить) метод в компоненте

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/en/api.html#vuexstore-instance-methods

Я думаю, что Аскер хочет использовать часы с Vuex.

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

      },
      {
        deep:true
      }
      );

лучший способ наблюдать за изменениями в магазине-использовать 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.

Это для всех людей, которые не могут решить свою проблему с геттерами и на самом деле действительно нуждаются в наблюдателе, например, чтобы поговорить с не-vue сторонними вещами (см. 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);
        }
    }
}

если речь идет только о сочетании локального и глобального состояния, то doc mapState также пример:

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

Вы можете использовать комбинацию 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 демо.

когда вы хотите смотреть на государственном уровне, это можно сделать следующим образом:

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

вы также можете использовать mapState в своем компоненте vue для прямого получения состояния из магазина.

в компоненте:

computed: mapState([
  'my_state'
])

здесь my_state - это переменная из магазина.

создать локальное состояние вашей переменной магазина, наблюдая и устанавливая изменения значений. Таким образом, что локальная переменная изменяется на form-input v-model напрямую не мутировать переменной магазине.

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