Question

一旦使用 mounted（）挂钩加载组件，我正在尝试创建一个Quill.js编辑器实例。但是，我需要使用与 vuex.store.state 收到的数据在同一 mounted（）挂钩上使用Quill.setContents（）设置Quill的内容。

我遇到的麻烦是，每当我尝试访问状态数据时，组件都会返回状态数据的空值，而不管是已挂载（）还是已创建（）挂钩。我也尝试过使用getter和计算属性。似乎没什么用。

我已经包含了我的 entry.js 文件，连接了所有组件，以便让您更轻松地帮助我。

Vue.component('test', {
    template: 
    `
        <div>
            <ul>
                <li v-for="note in this.$store.state.notes">
                    {{ note.title }}
                </li>
            </ul>
            {{ localnote }}
            <div id="testDiv"></div>
        </div>
    `,
    props: ['localnote'],
    data() {
        return {
            localScopeNote: this.localnote,
        }
    },
    created() {
        this.$store.dispatch('fetchNotes')
    },
    mounted() {
        // Dispatch action from store
        var quill = new Quill('#testDiv', {
            theme: 'snow'
        });
        // quill.setContents(JSON.parse(this.localnote.body));

    },
    methods: {
        setLocalCurrentNote(note) {
            console.log(note.title)
            return this.note = note;
        }
    }
});

const store = new Vuex.Store({
    state: {
        message: "",
        notes: [],
        currentNote: {}
    },
    mutations: {
        setNotes(state,data) {
            state.notes = data;
            // state.currentNote = state.notes[1];
        },
        setCurrentNote(state,note) {
            state.currentNote = note;
        }
    },
    actions: {
        fetchNotes(context) {
            axios.get('http://localhost/centaur/public/api/notes?notebook_id=1')
                    .then( function(res) {
                        context.commit('setNotes', res.data);
                        context.commit('setCurrentNote', res.data[0]);
                    });
        }
    },
    getters: {
        getCurrentNote(state) {
            return state.currentNote;
        }
    }
});

const app = new Vue({
    store
}).$mount('#app');

这是我正在渲染组件的index.html文件：

<div id="app">
    <h1>Test</h1>
    <test :localnote="$store.state.currentNote"></test>
</div>

顺便说一下，我已经尝试过道具选项作为最后的手段。但是，无论如何它都没有帮助我。对不起，如果这个问题太长了。感谢您抽出宝贵时间阅读本文。祝你有愉快的一天;）

Answer 1

我复制了你的代码并对其进行了测试（当然我创建了自己的虚拟笔记，因此我可以删除get请求）并且我能够在页面上显示笔记。

我从您的代码中意识到的一些事情，您可能需要添加商店属性，因为组件（测试）中有引用它的位置，但您只需在“app”组件上定义它。所以在代码的这一部分修改如下所示：

props: ['localnote'],
    data() {
        return {
            localScopeNote: this.localnote,
            store : store
        }
    },

关键区别在于“商店”属性的定义。请注意，您所做的，在您的应用程序组件中定义“store”属性是正确的，但需要在“test”组件中定义，正如我在上面的代码片段中所示。

第二件事是，你正在使用$ store而且我猜这会给你未定义，除非你说的，你所包含的库会相应地解析，但在我这边我必须删除所有“$ store”的引用并将其替换为“商店”（没有美元符号）。

最后出于测试目的，我建议你也

Vuex如何访问组件挂载或创建挂钩的状态数据？

1 个答案: