如何用vuex实现传值

最新推荐文章于 2024-11-11 17:39:05 发布

原创

最新推荐文章于 2024-11-11 17:39:05 发布 · 2.4k 阅读

收录于

本文介绍了通过Vuex在Vue应用中实现组件间数据传递的步骤，包括在store的state和getters中设置值，以及在组件中定义和引入传递的值。

分5步

1.在store文件夹下的modules文件夹下的setting.js文件下赋值。赋值位于state下，默认为空，也可以自定义赋值

const state = {
  // title: 'title',
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  entitytype: "",
  id:"",
  formdata:""
}

2.在store文件夹下的getting.js文件下赋值

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  
  entitytype: state => state.settings.entitytype,
  id: state => state.settings.id,
  formdata: state => state.settings.formdata,

}
export default getters

3.给其中一个组件里要传递的值进行定义

 methods: {  

      //点击左侧层级节点，跳转到对应页面
      handleNodeClick(data) {
       // console.log("点击左侧层级节点触发");

       this.$store.dispatch('settings/change