Javascript Vuex如何访问组件上的状态数据；有人上马了吗？

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

这里的问题是，每当我尝试访问状态数据时，该组件都会返回空值，而不管它是在mounted（）还是created（）钩子上。我也尝试过getter和computed属性。似乎什么都不管用

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

Vue.component（'test'）{
模板：
`


{{note.title}


{{localnote}}
`,
道具：['localnote']，
数据（）{
返回{
localScopeNote:this.localnote，
}
},
创建（）{
此.$store.dispatch（'fetchNotes'））
},
安装的（）{
//从商店发货
var quill=新的quill（“#testDiv”{
主题：“雪”
});
//setContents（JSON.parse（this.localnote.body））；
},
方法：{
setLocalCurrentNote（注释）{
console.log（note.title）
返回此。注意=注意；
}
}
});
const store=新的Vuex.store({
声明：{
消息：“”，
注：[]，
当前注释：{}
},
突变：{
setNotes（状态、数据）{
state.notes=数据；
//state.currentNote=state.notes[1]；
},
setCurrentNote（状态，注释）{
state.currentNote=注释；
}
},
行动：{
fetchNotes（上下文）{
axios.get（）http://localhost/centaur/public/api/notes?notebook_id=1')
.然后（功能（res）{
commit（'setNotes'，res.data）；
commit（'setCurrentNote'，res.data[0]）；
});
}
},
吸气剂：{
getCurrentNote（状态）{
返回状态.currentNote；
}
}
});
const app=新的Vue({
商店
}).$mount（“#app”）；

下面是index.html文件，我在其中渲染组件：

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

试验

---

顺便说一句，我已经尝试了作为最后手段的道具选项。然而，这对我没有任何帮助。如果这个问题太长，很抱歉。感谢您花时间阅读本文。祝你今天愉快；）

我将推荐以下步骤来调试上述代码：

• 在Vue开发工具中，检查网络调用后是否设置了状态
• 当您尝试异步获取数据时，调用

  创建/装载的

  钩子时，数据可能尚未到达
• 在组件中添加一个

  updated

  hook，并尝试记录或访问该状态，您应该能够看到它

---

请提供上述调试的结果，然后我将能够添加更多详细信息。

我不明白您为什么要将道具恢复到状态？i、 e数据方法。我说的是这一行

localScopeNote:this.localnote，

我认为这应该是一个计算属性这对于创建羽毛笔编辑器和使用状态变量设置编辑器的内容都非常有效。我错过了最新的钩子。非常感谢你。