账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    很多页面或者组件要调用vuex的state,怎么写最好啊?
    34
    0

    store我使用了2个模块,/store/index.js如下:

    import Vue from 'vue';
    import Vuex from 'vuex';
    import app from './modules/app';
    import user from './modules/user';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      modules: {
        app,
        user
      }
    });
    
    export default store
    

    /store/modules/app.js如下:

    const app = {
      state: {
        skills: null //另外还有很多状态,在此例举一个
      },
      mutations: {},
      actions: {},
      getters:{}
    }
    
    export default app;

    现在我是在所有页面或者组件的data里面直接引用状态,如

    export default {
      data() {
        skills: this.$store.state.app.skills,
      }
    }

    这样可以用,但是合理么?

    我试了一下在页面使用

    import { mapGetters } from 'vuex'
    export default {
      computed: {
        ...mapGetters(['skills']),
      },
    }

    这样好像比较符合规范,但是难道需要把states的所有属性都在getters全部写一次return?感觉很冗余啊?
    特来请教,不胜感激。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 局促空间的自救 普通会员 1楼

      在Vue.js中,为了在组件中调用Vuex的state,你可以使用this.$store作为方法参数。但是,这通常不是最佳实践,因为Vuex的state是组件内部的数据,不应该直接暴露给外部。

      一个更好的方法是使用this.$store.dispatch来调用Vuex的state方法。这个方法返回一个Promise,当状态被改变时,Promise会解析,否则会抛出错误。

      例如:

      javascript export default { data() { return { count: 0 }; }, methods: { increment() { this.$store.dispatch('increment'); } } };

      在这个例子中,increment方法被注入到了组件中,当组件的状态改变时,它会被调用。这使得代码更加模块化,也更易于理解和维护。

      另外,this.$store.dispatch的方法可以使用.then().catch()来处理可能的错误。例如:

      javascript export default { data() { return { count: 0 }; }, methods: { increment() { this.$store.dispatch('increment', { count: count + 1 }); } } };

      在这个例子中,如果状态改变时发生了错误,then()方法会被调用,否则catch()方法会被调用。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部