我同时使用vuex和vuejs 2。
我是vuex的新手,我想看一个商店变量的变化。
我想在我的vue组件中添加手表功能
这是我目前所拥有的:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
我想知道my_state是否有任何变化
我怎么看店。My_state在我的vuejs组件?
您可以使用Vuex操作、getter、计算属性和监视器的组合来侦听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演示。
比如说,你有一篮水果,
每次你从篮子里添加或取出一个水果,你
想要(1)显示有关水果数量的信息,但你也(2)想要以某种奇特的方式通知水果的数量…
fruit-count-component.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, yay!`)
}
}
}
</script>
请注意,监视对象中的函数名必须与计算对象中的函数名匹配。在上面的例子中,名字是count。
被监视属性的新值和旧值将作为参数传递到监视回调(count函数)。
篮子商店可以是这样的:
fruit-basket.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文档:观察
正如Gabriel所说,观察商店变化的最佳方法是使用mapGetters。
但在某些情况下,你不能通过mapGetters来实现,例如,你想从store中获取一些东西,使用parameter:
getters: {
getTodoById: (state, getters) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
在这种情况下,你不能使用mapGetters。你可以试着这样做:
computed: {
todoById() {
return this.$store.getters.getTodoById(this.id)
}
}
但不幸的是,todoById仅在以下情况下才会更新。Id改变了
如果你想更新你的组件在这种情况下使用。$store。腕表解决方案由龚提供。或者有意识地处理组件并更新它。当需要更新todoById时,使用todoById。