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

Question

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

我的麻烦在于，每当我尝试访问组件 returns 状态数据时，它的值为空，无论是在 mounted() 还是 created() 钩子。我也尝试过使用吸气剂和计算属性。似乎没有任何效果。

我已经包含了我的 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>

顺便说一句，作为最后的手段，我已经尝试了 props 选项。但是，无论如何它都没有帮助我。对不起，如果这个问题太长。感谢您花时间阅读本文。祝你有美好的一天 ;)

Answer 1

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

我从你的代码中意识到了一些事情，你可能需要添加一个商店属性因为你的组件 ( test ) 中有些地方你正在引用它，但你只定义它'app' 组件。所以在这部分你的代码修改如下：

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

关键区别在于 'store' 属性的定义。请注意，您所做的在应用程序组件中定义 "store" 属性是正确的，但同样需要在 "test" 组件中定义，正如我在以上代码片段。

第二件事是，您正在使用 $store，我想这给您未定义，除非如您所说，在您包含的库中相应地解决了这个问题，但在我这边，我不得不删除所有对“$”的引用store" 并将其替换为 "store"（不带美元符号）。

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

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

Vuex how to Access state data on component mounted or created hook?

javascript

vuejs2

vuex

quill