Question

我想从Vuex配置状态中获取数据集合，并传递给组件的prop，该组件将使用它来填充自动完成功能。我无法弄清楚这样做的语法。

在下面的尝试下，我无法构建。我需要将prop移到父级中的数据并通过吗？

配置数据如下： {"permissions":[{"permission":"ADMIN_ACCOUNT", "permissionName":"Account Admin"}, ...]}

这是我最近的尝试：

模块

import axios from 'axios';

const state = {
    config: []
}

const getters = {
    getConfig: state => state.config
}

const actions = {
    async getConfig({ commit }) {
        const response = await axios.get('/api/config')
        commit('setConfig', response.data)
    }
}

const mutations = {
    setConfig: (state, config) => (state.config = config)
}

export default {
    state,
    getters,
    actions,
    mutations
}

父组件

<MyComponent
    //:permissions="this.getConfig['permissions']"
    //:permissions="this.getConfig().permissions"
    //etc
...
computed: mapGetters(["getConfig"]),
...

子组件

...
props: {
    permissions: [],
...

Answer 1

您可以直接映射状态而无需使用吸气剂。

computed: {
  ...mapState({permissions: state => state.moduleName.config.permissions})
}

然后将permissions传递给组件prop。

<MyComponent :permissions="permissions" />

需要在模块上设置默认权限，如@Phil注释。

将数据从Vuex吸气剂传递到组件prop

1 个答案: