Я использую 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?
javascript
vue.js
vuejs2
vuex
raffffffff
источник
источник
Ответы:
Допустим, например, что у вас есть корзина фруктов, и каждый раз, когда вы добавляете или удаляете фрукты из корзины, вы хотите (1) отобразить информацию о количестве фруктов, но вы также (2) хотите получать уведомления о количество фруктов в некоторой причудливой моде ...
фруктово-кол-component.vue
Обратите внимание, что имя функции в
watch
объекте должно совпадать с именем функции вcomputed
объекте. В приведенном выше примере имяcount
.Новые и старые значения наблюдаемого свойства будут переданы в обратный вызов watch (функция count) в качестве параметров.
Магазин может выглядеть так:
плодовые basket.js
Вы можете прочитать больше в следующих ресурсах:
источник
watch
действие должно быть разделено на два шага: 1) во-первых, проверяется, кэшируются ли данные о желании и просто ли они возвращают кэшированные данные; 2) Если кеш вышел из строя, мне нужно асинхронное действие ajax для извлечения данных, но, похоже, этоaction
работа. Надеюсь, мой вопрос имеет смысл, спасибо!Вы не должны использовать наблюдатели компонента для прослушивания изменений состояния. Я рекомендую вам использовать функции получения, а затем отобразить их внутри вашего компонента.
В вашем магазине:
Вы должны иметь возможность прослушивать любые изменения, сделанные в вашем магазине, используя
this.myState
ваш компонент.https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
источник
Это так просто, как:
источник
function(n) { console.log(n); }
Как уже упоминалось выше, не стоит смотреть изменения непосредственно в магазине.
Но в некоторых очень редких случаях это может быть полезно для кого-то, поэтому я оставлю этот ответ. Для других случаев, пожалуйста, смотрите ответ @ gabriel-robert.
Вы можете сделать это до конца
state.$watch
. Добавьте это в вашcreated
(или где вам нужно это выполнить) метод в компонентеБолее подробная информация: https://vuex.vuejs.org/api/#watch
источник
Я думаю, что спрашивающий хочет использовать часы с Vuex.
источник
Это для всех людей, которые не могут решить свою проблему с геттерами и действительно нуждаются в наблюдателе, например, для общения с сторонними разработчиками (см. Vue Watchers). о том, когда использовать наблюдателей).
Наблюдатели компонента Vue и вычисленные значения также работают с вычисленными значениями. Так что с vuex ничем не отличается
если речь идет только о комбинировании локального и глобального состояния, документ mapState также предоставляет пример:
источник
если вы используете машинопись, то вы можете:
источник
Создайте локальное состояние переменной вашего магазина, наблюдая и изменяя значения. Таким образом, локальная переменная изменяется для v-модели ввода формы, не изменяет напрямую переменную хранилища .
источник
Лучший способ наблюдать за изменениями в магазине - использовать,
mapGetters
как сказал Габриэль. Но есть случай, когда вы не можете сделать это,mapGetters
например, хотите получить что-то из магазина, используя параметр:в этом случае вы не можете использовать
mapGetters
. Вы можете попробовать сделать что-то вроде этого:Но, к сожалению,
todoById
будет обновляться только в случаеthis.id
измененияЕсли вы хотите обновить компонент в таком случае, воспользуйтесь
this.$store.watch
решением, предоставленным Gong . Или обращайтесь со своим компонентом осознанно и обновляйте,this.id
когда вам нужно обновитьtodoById
.источник
Если вы просто хотите посмотреть на государственную собственность , а затем действовать в рамках компонента в соответствии с изменением этого свойства тогда смотрите пример ниже.
В
store.js
:В этом сценарии я создаю
boolean
свойство состояния, которое я собираюсь изменить в разных местах приложения:Теперь, если мне нужно посмотреть это свойство состояния в каком-то другом компоненте, а затем изменить локальное свойство, я бы написал следующее в
mounted
хуке:Сначала я устанавливаю наблюдателя для свойства состояния, а затем в функции обратного вызова я использую
value
это свойство для измененияlocalProperty
.Я надеюсь, что это помогает!
источник
Когда вы хотите посмотреть на государственном уровне, это можно сделать следующим образом:
источник
store.state
изменения поdispatch
состоянию действия от компонента, так как это поведение работает, только если вы используете этот компонент. Также вы можете закончить с бесконечным циклом. Часы дляstore.state
меняться редко используют, например , если у вас есть компонент или страница , которая должна сделать некоторые действия , основанные наstore.state
измененном , которые не могут обрабатываться с помощью компьютерной mapState только там , где вы не можете сравнитьnewValue
противoldValue
store.dispatch
? если вы хотите обработатьstore.state
изменения дляstore' why not handle it inside
store.mutations`?store.dispatch
первую очередь. Например, я хочу получать все города страны, когда они$store.state.country
меняются, поэтому я добавляю это в наблюдатель. Тогда я бы написал вызов ajax:store.dispatch('fetchCities')
я пишу:axios.get('cities',{params:{country: state.country }}).then(response => store.commit('receiveCities',response) )
Вы можете использовать комбинацию действий Vuex , методов получения , вычисленных свойств и наблюдателей для прослушивания изменений значения состояния Vuex.
HTML-код:
Код JavaScript:
Смотрите демоверсию JSFiddle .
источник
Вы также можете подписаться на магазин мутаций:
https://vuex.vuejs.org/api/#subscribe
источник
Внутри компонента создайте вычисляемую функцию
Теперь можно просмотреть имя вычисленной функции, например
Изменения, сделанные в
vuex
состоянии,my_state
будут отражены в вычисленной функцииmyState
и вызовут функцию наблюдения.Если состояние
my_state
имеет вложенные данные, тоhandler
опция поможет большеЭто будет смотреть все вложенные значения в магазине
my_state
.источник
Вы также можете использовать mapState в вашем компоненте vue для прямого получения состояния из хранилища.
В вашем компоненте:
Где
my_state
переменная из магазина.источник
источник
Я использовал этот способ, и он работает:
store.js:
mutations.js
actions.js
getters.js
И в вашем компоненте, где вы используете состояние из магазина:
Когда пользователь отправляет форму, вызывается действие STORE , после созданного успеха мутация CREATE_SUCCESS фиксируется после этого. Включите createSuccess true, и в компоненте наблюдатель увидит, что значение изменилось, и вызовет уведомление.
isSuccess должен совпадать с именем, которое вы объявляете в getters.js
источник