vue2 watch监听sessionstorage 监听不到变化啊

可以尝试使用第三方库vue-ls来监听sessionStorage的变化。首先需要安装vue-ls，然后在main.js中引入并配置。接着在需要监听的组件中使用watch监听sessionStorage的变化即可。
代码示例：
// 安装vue-ls
npm install vue-ls --save

// main.js中引入并配置
import Vue from 'vue'
import VueStorage from 'vue-ls'

Vue.use(VueStorage, {
namespace: 'vuejs__', // key prefix
name: 'ls', // name variable Vue.[ls] or this.[$ls],
storage: 'session' // storage name session, local, memory
})

// 组件中使用watch监听sessionStorage的变化
export default {
data() {
return {
role: this.$ls.get('role') // 初始化时获取sessionStorage中的值
}
},
mounted() {
// 监听sessionStorage的变化
this.$watch('$ls.role', (val) => {
this.role = val
})
}
}
登录后复制

相关问题

vue2 watch监听sessionstorage 监听不到

根据提供的代码，可能是因为watch监听的是sessionStorage对象本身，而不是sessionStorage中某个具体的key值。因此，当sessionStorage中的某个key值发生变化时，watch监听不到。解决方法是在sessionStorage中的某个key值发生变化时，手动触发一个事件，让watch监听到这个事件，从而实现监听sessionStorage中某个key值的变化。
代码实现如下：
// 监听sessionStorage中某个key值的变化
watch: {
'$store.state.sessionStorageKey': function (newVal, oldVal) {
console.log('sessionStorageKey changed:', newVal, oldVal)
}
},
// 手动触发事件
methods: {
setSessionStorage: function (key, val) {
sessionStorage.setItem(key, val)
this.$store.state.sessionStorageKey = key + Math.random()
}
}
登录后复制

vue2 watch监听sessionstorage

可以使用Vue的watch属性来监听sessionStorage的变化。首先需要在Vue组件中引入sessionStorage，然后在watch属性中监听sessionStorage的变化。具体实现代码如下：
export default {
data() {
return {
// 定义需要监听的sessionStorage的key
dialogLogin: sessionStorage.getItem('dialogLogin')
}
},
watch: {
// 监听sessionStorage的变化
dialogLogin(newVal) {
// 处理sessionStorage变化后的逻辑
console.log('sessionStorage变化了', newVal)
}
}
}
登录后复制
需要注意的是，当sessionStorage变化时，Vue组件中的data属性并不会自动更新，需要手动更新。可以在watch属性中监听到sessionStorage变化后，手动更新data属性。另外，需要注意在监听sessionStorage变化时，要确保sessionStorage中的值是字符串类型，否则可能会出现监听不到变化的情况。