简介:在Vue应用程序中使用Vuex进行状态管理时,经常需要在组件中响应状态的变化。这里来记录一下
一. 在使用 Vuex 进行状态管理时,我们经常需要在组件中响应状态的变化。Vue 提供了两种方式来实现这一点:computed
属性和 watch
选项。这里,我们将通过一个示例来了解如何使用这两种方式来监听 Vuex 状态变化。
首先,我们看一下组件中的代码:
//VUE.JS
import { mapState } from 'vuex';
export default {
computed: {
// 映射 Vuex 中的状态到当前组件的计算属性
...mapState({
areaLoadStatus: state => state.areaLoading,
testDate: state => state.vuexRtspImg
})
},
watch: {
// 监听 Vuex 中的状态变化
areaLoadStatus(newValue, oldVal) {
console.log(newValue, oldVal)
},
testDate(newValue, oldVal) {
console.log(newValue, oldVal)
}
}
}
在这段代码中,我们使用了 mapState
辅助函数将 Vuex 中的两个状态(areaLoading
和 vuexRtspImg
)映射到组件的计算属性中。这样,我们就可以在组件模板中直接使用这些计算属性,而不必每次都通过 this.$store.state
来访问状态。
接下来,我们使用 watch
选项来监听这两个状态的变化。当状态发生变化时,相应的监听器函数会被调用,新值和旧值会作为参数传递进来。在这个例子中,我们只是简单地将新值和旧值打印到控制台,但实际情况下吗,你可以在这里执行任何所需的逻辑,例如更新组件的其他数据属性或触发事件函数(如发送 API 请求)。
值得注意的是,watch
选项并不是唯一的方式来响应状态变化。如果你只需要在模板中使用状态,那么计算属性可能是一个更好的选择。计算属性会基于依赖的状态自动重新计算,并且在状态变化时会自动更新。这使得它比 watch
选项更高效。
二. 现在,让我们看一下在 Vuex 中如何触发状态变化:
//VUEX
actions: {
async callRtspImg(Con, row) {
Con.state.areaLoading = true; // 更新 areaLoading 状态
await postRtsp({ rtspPath: row.videoUrl, cameraId: row.cameraId })
.then(res => {
if (res.code === 200) {
Con.state.areaLoading = false; // 更新 areaLoading 状态
const data = res;
Con.state.vuexRtsInfo.wd = data.imageWidth;
Con.state.vuexRtsInfo.hg = data.imageHeight;
Con.state.vuexRtsInfo.img = `data:image/gif;base64,${data.data}`;
Con.state.vuexRtspImg = data.data; // 更新 vuexRtspImg 状态
} else if (res.code !== 200) {
// 处理错误
}
})
.catch(() => {})
.finally(() => {})
}
}
在这段代码中,我们有一个名为 callRtspImg
的 Vuex action。在这个 action 中,我们首先将 areaLoading
状态设置为 true,
表示正在加载数据。然后,我们发送一个 API 请求来获取数据。
如果请求成功(响应码为 200),我们会将 areaLoading
状态设置回 false,
并更新 vuexRtsInfo
对象中的几个属性。最后,我们还更新了 vuexRtspImg
状态,将响应数据存储在其中。
由于我们在组件中监听了 areaLoading
和 vuexRtspImg
状态的变化,所以当这些状态发生更改时,相应的监听器函数会被触发。这使我们能够根据状态的变化执行所需的逻辑,例如更新用户界面或发送其他 API 请求。
总的来说,使用 Vuex 进行状态管理时,computed
属性和 watch
选项为我们提供了一种优雅的方式来响应状态变化。computed
属性更适合于在模板中使用状态,而 watch
选项则更适合于执行副作用或更新其他组件数据。选择使用哪种方式取决于你的具体需求,但无论如何,这两种方式都可以帮助你编写更加可维护和易于理解的代码。
创作不易,感觉有用,就一键三连,感谢(●'◡'●)