将数据从 Vuex getter 传递到组件 prop答案

【问题标题】：Pass data from Vuex getter to component prop将数据从 Vuex getter 传递到组件 prop
【发布时间】：2020-05-20 23:05:15
【问题描述】：

我想从 Vuex 配置状态中提取数据集合并传递给组件的 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: [],
...

【问题讨论】：

只是:permissions="getConfig.permissions" 应该可以工作，但请注意a) 您的初始状态config 应该是一个对象，而不是一个数组，并且b) permissions 在您的Axios 请求完成之前不会被定义。也许用config: { permissions: [] } 初始化你的状态
这能回答你的问题吗？ Vue.js VUEX property undefined issue
按照您的建议将模块中的 permissions 更改为对象可以解决问题：config: { permissions: [] }。
如何避免子组件在页面刷新时丢失权限属性？

标签： vue.js vuex

【解决方案1】：

您可以直接映射状态而不需要 getter。

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

然后只需将permissions 传递给组件道具。

<MyComponent :permissions="permissions" />

@Phil 评论的模块需要设置默认权限。

【讨论】：