首页 前端知识 vue使用watch监听Vuex中存储的值变化

vue使用watch监听Vuex中存储的值变化

2024-06-05 13:06:39 前端知识 前端哥 36 596 我要收藏
 

1.在vuex创建值

 
import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        listData:[],
        activeName:'',
        stateTypes:1,
        token:window.sessionStorage.getItem("token"),
    },
    mutations:{
       searchData(state,listData){
        console.log(listData,"搜索后")
        state.listData = listData
       },
       loadDataList(state,listData){
        console.log(listData,"l;ist")
        state.listData = listData
       },
       setActiveName(state,activeName){
        state.activeName = activeName
       },
       setTypes(state,stateTypes){
        console.log(stateTypes,"是否成功了")
        state.stateTypes = stateTypes
       },
       setToken(state,token){
        state.token = token
       },
    }
})

2.更改vuex的值

this.$store.commit('searchData', arrayList)

3.使用计算属性获取到vuex的数据

computed: {

   newData() {

       return this.$store.state.listData

     },

},

4.使用监听属性获取到vuex的数据

 
watch: {
 newData: {

   handler(val) {

      this.show_data = val

    },

 },

},

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10887.html
标签
评论
发布的文章

基于Vue2的ofd文件预览

2024-06-10 11:06:28

网页快速置灰效果

2024-06-10 11:06:17

HTML5 CSS——Day6

2024-06-10 11:06:11

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!