Vue3监听vuex store中state的数据的方法

最新推荐文章于 2024-04-28 01:22:19 发布

xjyq

最新推荐文章于 2024-04-28 01:22:19 发布

阅读量346

点赞数 1

分类专栏：工具配置文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u012581726/article/details/137126291

版权

工具配置专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中使用Vuex库进行状态管理时，如何通过watch函数和计算属性来监听`store.state.count`的变化，并在变化时执行相应操作。

摘要由CSDN通过智能技术生成

方式1：

import { watch, reactive } from 'vue';
import { useStore } from 'vuex'; 
const store = useStore();
// 监听state.count的变化
watch(() => store.state.count, (newValue,oldValue) => {
   console.log(`someState changed from ${oldValue} to ${newValue}`);
  // 这里可以执行需要的操作
});

方式2：

import { watch, reactive } from 'vue';
import { useStore } from 'vuex'; 
const store = useStore();

// 使用计算属性来获取 store 中的状态
const storeCount = computed(() => store.state.CurrentTabName);
// 监听state.count的变化
watch(storeCount , (newValue,oldValue) => {
   console.log(`someState changed from ${oldValue} to ${newValue}`);
  // 这里可以执行需要的操作
});