我正在同时使用vuex和vuejs 2。
我对vuex还不太熟悉，我想监视一个store变量的更改。
我想在我的vue组件中添加watch函数。
目前为止，这就是我所拥有的。
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
我想知道 my_state 是否有任何更改。
在我的 Vue.js 组件中，如何监视 store.my_state？
比方说，你有一个水果篮子，每当你往里添加或移除一个水果时，你想要（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>
watch对象中的函数名必须与computed对象中的函数名匹配。在上面的示例中名称为count。
监视的属性的新旧值将作为参数传递到监视回调函数（即count函数）中。
篮子商店可以看起来像这样：
fruit-basket.jsimport 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
您可以在以下资源中阅读更多信息：
就像这样简单：
watch: {
'$store.state.drawer': function() {
console.log(this.$store.state.drawer)
}
}
如果该存储区位于一个模块中，请使用：
'$store.state.myModule.drawer'
对于嵌套的文件，请使用：
'$store.state.fileOne.fileTwo.myModule.drawer'
'$store.state.module.something'。 - xji您不应使用组件的观察器来监听状态变化。我建议您使用getter函数，然后将它们映射到组件内部。
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
在您的商店中：
const getters = {
getMyState: state => state.my_state
}
使用this.myState在您的组件中，您应该能够听取对您的存储所做的任何更改。
https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-%E8%BE%85%E5%8A%A9%E5%87%BD%E6%95%B0
如上所述，在商店里直接观察变化不是一个好主意
但在一些极为罕见的情况下，如果有人觉得有用，我将留下这个答案。对于其他情况，请参阅 @gabriel-robert 的回答
您可以通过 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.
}
);
我认为提问者希望在Vuex中使用watch。
this.$store.watch(
(state)=>{
return this.$store.getters.your_getter
},
(val)=>{
//something changed do something
},
{
deep:true
}
);
this访问Vue实例，比如created钩子函数。基本上，任何你需要的组件都可以这样做。 - vhoyer这是为那些无法通过getters解决问题，实际上确实需要一个watcher的人准备的，例如与非Vue第三方库进行交互（请参见 Vue Watchers 了解何时使用watchers）。
Vue组件的watchers和计算属性都可以在计算属性上工作。因此，在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
}
}
})
我尝试了所有可能的方法让它工作。
我发现，对于来自$store的对象的更改不一定会触发.watch方法。我的解决方法是
state中创建一个递增计数器作为标志，当被监视时，它会传播到组件$store.mutators中创建一个方法以修改复杂的数据集并增加计数器标志$store.state标志的更改。当检测到更改时，从$store.state复杂的数据集更新本地相关的反应式更改$store.mutators方法更改$store.state的数据集实现类似于以下内容：
存储
let store = Vuex.Store({
state: {
counter: 0,
data: { someKey: 0 }
},
mutations: {
updateSomeKey(state, value) {
update the state.data.someKey = value;
state.counter++;
}
}
});
组件
data: {
dataFromStoreDataSomeKey: null,
someLocalValue: 1
},
watch: {
'$store.state.counter': {
immediate: true,
handler() {
// update locally relevant data
this.someLocalValue = this.$store.state.data.someKey;
}
}
},
methods: {
updateSomeKeyInStore() {
this.$store.commit('updateSomeKey', someLocalValue);
}
虽然有些复杂，但基本上我们正在观察标志位的变化，然后更新本地数据以反映存储在$state中的对象中的重要更改。
Vue.config.devtools = false
const store = new Vuex.Store({
state: {
voteCounter: 0,
// changes to objectData trigger a watch when keys are added,
// but not when values are modified?
votes: {
'people': 0,
'companies': 0,
'total': 0,
},
},
mutations: {
vote(state, position) {
state.votes[position]++;
state.voteCounter++;
}
},
});
app = new Vue({
el: '#app',
store: store,
data: {
votesForPeople: null,
votesForCompanies: null,
pendingVote: null,
},
computed: {
totalVotes() {
return this.votesForPeople + this.votesForCompanies
},
peoplePercent() {
if (this.totalVotes > 0) {
return 100 * this.votesForPeople / this.totalVotes
} else {
return 0
}
},
companiesPercent() {
if (this.totalVotes > 0) {
return 100 * this.votesForCompanies / this.totalVotes
} else {
return 0
}
},
},
watch: {
'$store.state.voteCounter': {
immediate: true,
handler() {
// clone relevant data locally
this.votesForPeople = this.$store.state.votes.people
this.votesForCompanies = this.$store.state.votes.companies
}
}
},
methods: {
vote(event) {
if (this.pendingVote) {
this.$store.commit('vote', this.pendingVote)
}
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<div id="app">
<form @submit.prevent="vote($event)">
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="vote"
id="voteCorps"
value="companies"
v-model="pendingVote"
>
<label class="form-check-label" for="voteCorps">
Equal rights for companies
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="vote"
id="votePeople"
value="people"
v-model="pendingVote"
>
<label class="form-check-label" for="votePeople">
Equal rights for people
</label>
</div>
<button
class="btn btn-primary"
:disabled="pendingVote==null"
>Vote</button>
</form>
<div
class="progress mt-2"
v-if="totalVotes > 0"
>
<div class="progress-bar"
role="progressbar"
aria-valuemin="0"
:style="'width: ' + peoplePercent + '%'"
:aria-aluenow="votesForPeople"
:aria-valuemax="totalVotes"
>People</div>
<div
class="progress-bar bg-success"
role="progressbar"
aria-valuemin="0"
:style="'width: ' + companiesPercent + '%'"
:aria-valuenow="votesForCompanies"
:aria-valuemax="totalVotes"
>Companies</div>
</div>
</div>Vue.set(state.votes, newVotesObject)。 - Derek PollardVue.set()并不总是有用的，例如当您将非响应式数据导入到您的Vuex状态或Vue组件中时。 - Adonis Gaitatzis如果您使用 TypeScript，那么您可以：
import { Watch } from "vue-property-decorator";
..
@Watch("$store.state.something")
private watchSomething() {
// use this.$store.state.something for access
...
}如果你只是想要监听一个状态属性，并且根据该属性的更改在组件中执行相应操作，则请参见下面的示例。
在store.js中：
export const state = () => ({
isClosed: false
})
export const mutations = {
closeWindow(state, payload) {
state.isClosed = payload
}
}
在这个场景中，我正在创建一个 boolean 状态属性，我将在应用程序中的不同位置进行更改，如下所示：
this.$store.commit('closeWindow', true)
现在，如果我需要在另一个组件中监视该状态属性，然后更改本地属性，我将在 mounted 钩子中编写以下内容：
mounted钩子中编写以下代码：
mounted() {
this.$store.watch(
state => state.isClosed,
(value) => {
if (value) { this.localProperty = 'edit' }
}
)
}
通过监听值的变化并进行设置，创建您的存储变量的本地状态(Local state)，以使表单输入v-model的局部变量不会直接改变存储变量(store variable)。
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
watch操作需要分成两步时该怎么办：1）首先，检查所需数据是否已缓存，如果是，则返回缓存的数据；2）如果缓存失败，我需要一个异步ajax操作来获取数据，但这似乎是action的工作。希望我的问题有意义，谢谢！ - 1Cr18Ni9