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

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

07.04.2017 08:13:22 Просмотров 64 Источник

Я использую 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в моем компоненте vuejs?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex#comment95320393_43270159
используйте плагин Vuejs который поставляется с chrome он пригодится

Ответы - vuejs 2 Как смотреть значения магазина из vuex / vuejs 2 how to watch store values from vuex

GONG

07.04.2017 08:31:09

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

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

Вы можете сделать это через 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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43270355#comment73655415_43270355
Я не думаю, что это хорошая идея, чтобы смотреть состояние непосредственно. Мы должны использовать геттеры. vuex.vuejs.org/en/getters.html#the-mapgetters-helper
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43270355#comment78938819_43270355
@GabrielRobert я думаю, что есть место для обоих. Если вам нужно реактивно изменить условия шаблона, используя вычисленное значение с mapState и т. д., имеет смысл. Но в остальном, как и для равномерного управления потоком в компоненте, вам нужны полные часы. Вы правы, вы должны использовать не простые компонентные наблюдатели,а состояние.$watch предназначен для этих случаев использования
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43270355#comment88915980_43270355
Все упоминают об этом, но никто не говорит Почему! Я пытаюсь построить магазин vuex, который автоматически синхронизируется с БД при изменениях. Я чувствую, что наблюдатели на магазине-это самый фрикционный способ! А ты как думаешь? Все еще не очень хорошая идея?
Gabriel Robert

08.04.2017 03:49:24

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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment74975262_43294294
Я не знаю, как реализовать mapGetters. Можете ли вы указать мне на пример. Это было бы большим подспорьем. Я просто реализовать гонг ответ в данный момент. TY
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment75038635_43294294
@Rbex "mapGetters" является частью библиотеки "vuex". Вам не нужно его реализовывать.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment75052299_43294294
Спасибо, я видел видео в vuex, и я уже использовал Vuex mapGetters, computed: { ...mapGetters({ myState: 'getMyState' }) }это та часть, которая дает мне ошибку, и я устанавливаю babel. Теперь это работает как шарм... TY
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment83486627_43294294
Это отлично работает вместе с vue-highcharts, чтобы обеспечить перемещение диаграммы в реальном времени.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment85977442_43294294
@Габриэль Роберт, может быть, вы можете мне помочь. Посмотрите на это : stackoverflow.com/questions/49487276/…
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment87970455_43294294
Этот ответ просто неправильный. Ему действительно нужно следить за вычисленными свойствами.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment88323724_43294294
Геттер, однажды вызванный, будет только извлекать состояние в это время. Если вы хотите, чтобы это свойство отражало изменение состояния от другого компонента, вы должны наблюдать за ним.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment92077357_43294294
Почему "вы не должны использовать наблюдателей компонента для прослушивания изменения состояния"? Вот пример, о котором вы можете не думать, если я хочу посмотреть на токен из состояния, и когда он изменится, чтобы перенаправить на другую страницу. итак, есть некоторые случаи, когда вам нужно это сделать. может быть, вам нужно больше опыта, чтобы знать это.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/43294294#comment98691242_43294294
Этого недостаточно. Вы должны следить за ним в этом случае.
Eugene Kulakov

08.04.2017 10:06:35

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

В вашем компоненте:

computed: mapState([
  'my_state'
])

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

Является ответом!
Anastazy

03.06.2017 09:21:20

Допустим, например, что у вас есть корзина фруктов, и каждый раз, когда вы добавляете или удаляете фрукт из корзины, вы хотите (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, yaay!`)
    }
  }
}
</script>

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

Новые и старые значения наблюдаемого свойства будут переданы в функцию обратного вызова watch (функция 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

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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/44347195#comment101232325_44347195
Мне просто интересно, что я делаю, когда действие watchразделиться на два шага: 1) Сначала проверьте, кэшируются ли данные желания, и если он просто возвращает кэшированные данные; 2) Если кэш не удался, мне нужно асинхронное действие ajax для извлечения данных, но это, похожеaction. Надеюсь, мой вопрос имеет смысл, спасибо!
yeahdixon

06.07.2017 08:42:17

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

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

      },
      {
        deep:true
      }
      );
Arseniy-II

11.09.2017 04:37:20

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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/46147116#comment92138469_46147116
спасибо. Это именно мой вариант использования, и действительно, геттер не может быть просмотрен тогда ...
dube

25.11.2017 11:30:31

Это для всех людей, которые не могут решить свою проблему с геттерами и на самом деле действительно нуждаются в наблюдателе, например, чтобы поговорить с не-vue сторонними материалами (см. Vue Watchers on when to use 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
        }
    }
})
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/47490241#comment85040852_47490241
хороший хак, но слишком утомительный, тебе не кажется?
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/47490241#comment85095708_47490241
Это не хак, если он находится в документах, не так ли? Но тогда это не аргумент в пользу vue / vuex
Amin NAIRI

26.03.2018 04:58:14

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

Andy

15.05.2018 03:50:07

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

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91197704_50350682
Это не очень хорошая идея, чтобы справиться store.stateизменение состояния путем dispatchдействия состояния из компонента, поскольку это поведение работает только при использовании этого компонента. Также вы можете закончить с бесконечным циклом. Часы для store.stateизменение состояния редко используется, например, если у вас есть компонент или страница, которые должны выполнять некоторые действия на основе store.stateизменено, что не может быть обработано с помощью вычисленного mapState только там, где вы не можете сравнить newValueпротив oldValue
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91206816_50350682
@Januartha это просто работает.
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91287961_50350682
@Januartha каково ваше предложение по этой проблеме?
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91290565_50350682
@Энди да конечно его работа. Я просто хочу отметить, почему вы звоните store.dispatch? если вы хотите справиться store.stateизменение состояния для store' why not handle it inside магазина.мутации` ?
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91290667_50350682
@BillalBEGUERADJ I prever dube решение чище
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/50350682#comment91895812_50350682
@Januartha, потому что может быть вызов ajax, чтобы произойти, прежде чем делать мутацию, вот почему я использую store.dispatchсначала отправь. Например, я хочу получить все города из страны, когда $store.state.countryменяется, поэтому я добавляю это к наблюдателю. Затем я бы написал вызов ajax: in store.dispatch('fetchCities') я пишу: axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Mukundhan

04.10.2018 12:07:12

Создайте локальное состояние переменной хранилища, наблюдая и устанавливая изменения значений. Таким образом, что локальная переменная изменяется для V-модели ввода формы, напрямую не мутирует переменную хранилища .

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

07.01.2019 04:15:02

Вы также можете подписаться на магазин мутаций:

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

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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/54075146#comment95847636_54075146
Вы можете запустить это в крючке beforeMount () вашего компонента, а затем отфильтровать входящие мутации с помощью оператора if. например, если (мутация.тип == "имена/SET_NAMES") {... сделать нечто }
Zhang Sol

15.05.2019 09:08:17

если вы используете typescript, то вы можете :

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

..

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

https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/56142684#comment102340939_56142684
Почему именно это было отклонено? Просто потому, что решение для Vue-class-component и The to просило старые стили vue-class? Я считаю, что первое предпочтительнее. Может быть, @Zhang Sol мог бы упомянуть во введении, что это явно для Vue-class-component?
micah5

05.06.2019 04:32:28

Это так же просто, как:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}
https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex/56461539#comment103913754_56461539
Это чертовски проще, чем любой из ответов здесь... есть ли какие-либо аргументы против этого..?
Закрыть X