Question

如果我尝试按照文档中的建议将名称空间作为第一个参数传递，则该值将变为“未定义”（在模块定义中设置了“ test”）

...mapState('guest', {
    email: state => state.email,
}),

但是如果我不使用命名空间作为第一个参数就以这种方式运行的话，它会很好地工作

...mapState({
    email: state => state.guest.email,
}),

我想使用快捷方式，根据文档，第一个示例应该可以正常工作...对吗？

https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace

这是我的模块定义：

const initialState = function(){
    let state = {
        email: null,
    };

    return state;
};    

export default {
    namespaced: true,
    state: initialState(),
    mutations: {
        fill(state, data) {
            Object.assign(state, data);
        },
        reset(state) {
            Object.assign(state, initialState());
        }
    },
    actions: {
    }
};

Answer 1

您的computed...mapState语法是正确的，因此问题可能出在填充突变的调用方式上。您是否在命名提交间隔？

这是working example。

唯一要更改的是state: initialState应该是state: Object.assign({}, initialState)。

第一种方法将状态设置为对initialState对象的引用，因此fill突变中的任何更改都将覆盖initialState的值，而reset突变将无效。 / p>

组件

export default {
  ...
  computed: {
    ...mapState("guest", {
      email: state => state.email
    })
  },
  mounted() {

    // Call the fill mutation with namespace
    this.$store.commit("guest/fill", {
      email: "some@email"
    });

    // Call reset after 2 seconds 
    setTimeout(() => {
      this.$store.commit("guest/reset");
    }, 2000);
  }

商店

const initialState = {
  name: "dummyName",
  email: "dummy@initial" // put a value here so we can see if mapState works
};

const store = new Vuex.Store({
  modules: {
    guest: {
      namespaced: true,
      state: Object.assign({}, initialState),
      mutations: {
        fill(state, data) {
          Object.assign(state, data);
        },
        reset(state) {
          Object.assign(state, initialState);
        }
      }
    }
  }
});

vuex模块appState无法与作为第一个参数传递的模块名称空间一起使用

1 个答案: