vuejs 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
в моем компоненте vuejs?

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

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




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



computed: { ...mapGetters({ myState: 'getMyState' }) }
это та часть, которая дает мне ошибку, и я устанавливаю babel. Теперь это работает как шарм... TY







08.04.2017 10:06:35
Вы также можете использовать mapState в своем компоненте vue для прямого получения состояния из хранилища.
В вашем компоненте:
computed: mapState([
'my_state'
])
Где my_state
- это переменная из магазина.

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
Вы можете прочитать больше в следующих ресурсах:

watch
разделиться на два шага: 1) Сначала проверьте, кэшируются ли данные желания, и если он просто возвращает кэшированные данные; 2) Если кэш не удался, мне нужно асинхронное действие ajax для извлечения данных, но это, похожеaction
. Надеюсь, мой вопрос имеет смысл, спасибо!


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
.


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



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


store.state
изменение состояния путем dispatch
действия состояния из компонента, поскольку это поведение работает только при использовании этого компонента. Также вы можете закончить с бесконечным циклом. Часы для store.state
изменение состояния редко используется, например, если у вас есть компонент или страница, которые должны выполнять некоторые действия на основе store.state
изменено, что не может быть обработано с помощью вычисленного mapState только там, где вы не можете сравнить newValue
против oldValue



store.dispatch
? если вы хотите справиться store.state
изменение состояния для store' why not handle it inside
магазина.мутации` ?


store.dispatch
сначала отправь. Например, я хочу получить все города из страны, когда $store.state.country
меняется, поэтому я добавляю это к наблюдателю. Затем я бы написал вызов ajax: in store.dispatch('fetchCities')
я пишу: axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )

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

07.01.2019 04:15:02
Вы также можете подписаться на магазин мутаций:
store.subscribe((mutation, state) => {
console.log(mutation.type)
console.log(mutation.payload)
})




