Vuejs监听vuex中值的变化的方法示例

Vuejs中的值变化监听：一个基于Vuex的实践案例

长沙网络推广发现了一种Vuejs中监听vuex中值变化的巧妙方法，并在此分享给大家，作为参考。这就像你有一篮水果，每次增减水果时，你希望显示的水果数量并在数量变化时得到通知。

我们来看一个名为“fruit-count-component.vue”的组件代码示例。在此模板中，我们展示了当前的水果数量，并通过watch来监听这个数值的变化。

template部分：

```html

```

在script部分：

```javascript

import basket from '../resources/fruit-basket' //引入我们的vuex store

export default {

computed: { //使用puted对象计算水果数量

count () {

return basket.state.fruits.length //或者直接返回basket.getters.fruitsCount，取决于你的设计决定。

}

},

watch: { //监听count的变化

count (newCount, oldCount) {

console.log(`We have ${newCount} fruits now, yaay!`); //当水果数量变化时，打印出新的数量。

}

}

}

```

接下来是我们的vuex store，“fruit-basket.js”。在这里我们定义了我们水果篮的状态和获取器：

```javascript

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex) //使用Vuex插件

const basket = new Vuex.Store({ //创建一个新的Vuex store实例命名为basket。

state: { //定义状态对象，这里我们的状态是水果数组。

fruits: []

},

getters: { //定义获取器，这里我们获取水果的数量。

fruitsCount (state) {

return state.fruits.length

}

}

// 这里你可能还需要定义一些mutations和actions来处理状态的改变，但为了保持示例简洁，我们就跳过这部分。

})

export default basket //导出我们的store供其他组件使用。

``` 需要注意的是，watch 对象中的函数名必须和puted对象中的函数名匹配。在这个例子中，它们都是 count。被监视属性的新值和旧值将作为参数传递到监视回调中。 以上就是Vuejs中监听vuex中值变化的基本方法。为了更深入的了解和学习，您可以阅读更多相关资源，也希望大家多多支持狼蚁SEO。