vueX

2022-07-12  本文已影响0人  Delet

vueX可以在页面之间进行传值,设置的属性可供原局使用
该文件在vue项目中,src文件夹下的store文件夹下的index.js中

state

将需要的属性在state中设置好,且值为null。
例如:

state:{
    sideList:null
}

getters

可以获取state中属性的值
例如:

getters: {
    getSideList(state) {
      return state.sideList
    }
  }

mutations

可以设置state中属性的值
例如:

 mutations: {
    setSideList(state, list) {
      state.sideList = list
    }
  },

使用方法

第一步:

在有数据的页面想给其他组件进行传值,首先要拿到数据,在该页面中进行设置。
设置方法:
需要方法进行触发才可以设置,在methods中添加方法,并使用this.$store.commit('vuex中mutations对应的方法名',数据)
如:

methods: {
    handleSelect(key) {
      // 将侧边栏列表传入 vuex中
    this.$store.commit("setSideList",this.navList[key].list);
    },
  },

设置好就可以在其他页面进行获取,并且使用。
如果在特定的时期就需要在vuex中设置全局属性,则需要用到vue的生命周期进行设置。

第二步:

在想要的组件中获取全局设置的属性,需要在计算属性中进行获取,使用this.$store.getters.vueX中getters中对应的方法名
如:

computed: {
    // 将侧边栏列表从vuex中取出
    sideList() {
      return this.$store.getters.getSideList;
    },
  },

sideList可以直接在该组件使用。

上一篇下一篇

猜你喜欢

热点阅读