問(wèn)題描述

引入了一個(gè)使用vuex流程的組件，提示disatch 調(diào)用的方法not found?

文件store.js

/** * Vuex * http://vuex.vuejs.org/zh-cn/intro.html */import Vue from ’vue’;import Vuex from ’vuex’;Vue.use(Vuex);const now = new Date();const store = new Vuex.Store({ state: {// 當(dāng)前用戶(hù)user: { name: ’coffce’, img: ’dist/images/1.jpg’},// 會(huì)話(huà)列表sessions: [ {id: 1,user: { name: ’示例介紹’, img: ’dist/images/2.png’},messages: [ {content: ’Hello，這是一個(gè)基于Vue + Vuex + Webpack構(gòu)建的簡(jiǎn)單chat示例，聊天記錄保存在localStorge, 有什么問(wèn)題可以通過(guò)Github Issue問(wèn)我?！?date: now }, {content: ’項(xiàng)目地址: https://github.com/coffcer/vue-chat’,date: now }] }, {id: 2,user: { name: ’webpack’, img: ’dist/images/3.jpg’},messages: [] }],// 當(dāng)前選中的會(huì)話(huà)currentSessionId: 1,// 過(guò)濾出只包含這個(gè)key的會(huì)話(huà)filterKey: ’’ }, mutations: {INIT_DATA (state) { let data = localStorage.getItem(’vue-chat-session’); if (data) {state.sessions = JSON.parse(data); }},// 發(fā)送消息SEND_MESSAGE ({ sessions, currentSessionId }, content) { let session = sessions.find(item => item.id === currentSessionId); session.messages.push({content: content,date: new Date(),self: true });},// 選擇會(huì)話(huà)SELECT_SESSION (state, id) { state.currentSessionId = id;} ,// 搜索SET_FILTER_KEY (state, value) { state.filterKey = value;} }});store.watch( (state) => state.sessions, (val) => {console.log(’CHANGE: ’, val);localStorage.setItem(’vue-chat-session’, JSON.stringify(val)); }, {deep: true });export default store;export const actions = { initData: ({ dispatch }) => dispatch(’INIT_DATA’), sendMessage: ({ dispatch }, content) => dispatch(’SEND_MESSAGE’, content), selectSession: ({ dispatch }, id) => dispatch(’SELECT_SESSION’, id), search: ({ dispatch }, value) => dispatch(’SET_FILTER_KEY’, value)};

文件 chat.js

<script>import { actions } from ’../../vuex/store’;import Card from ’../../components/card’;import List from ’../../components/list’;import Text from ’../../components/text’;import Message from ’../../components/message’;export default { components: { Card, List, Text, Message }, vuex: {actions: actions }, created () {this.initData(); }}</script><template><p id='app'> <p class='sidebar'><card></card><list></list> </p> <p class='main'><message></message><text></text> </p></p></template><style lang='less' scoped>#app { margin: 20px auto; width: 800px; height: 600px; overflow: hidden; border-radius: 3px; .sidebar, .main {height: 100%; } .sidebar {float: left;width: 200px;color: #f4f4f4;background-color: #2e3238; } .main {position: relative;overflow: hidden;background-color: #eee; } .text {position: absolute;width: 100%;bottom: 0;left: 0; } .message {height: ~’calc(100% - 160px)’; }}</style>

文件引入的問(wèn)題是對(duì)的， 為什么會(huì)提示

[Vue warn]: Do not use built-in or reserved HTML elements as component id: Textwarn(unknown) [Vue warn]: Error in created hook: 'TypeError: this.initData is not a function'found in---> <Chat> at /banli/webchat/resources/vue-admin/src/views/webchat/chat.vue <ElCol>... (1 recursive calls) <ElRow> <Home> at /banli/webchat/resources/vue-admin/src/views/Home.vue <App> at /banli/webchat/resources/vue-admin/src/App.vue <Root>warn(unknown) TypeError: this.initData is not a function at VueComponent.created (eval at <anonymous> (app.js:6791), <anonymous>:33:14) at callHook (eval at <anonymous> (app.js:772), <anonymous>:2557:21) at VueComponent.Vue._init (eval at <anonymous> (app.js:772), <anonymous>:4001:5) at new VueComponent (eval at <anonymous> (app.js:772), <anonymous>:4170:12) at createComponentInstanceForVnode (eval at <anonymous> (app.js:772), <anonymous>:3519:10) at init (eval at <anonymous> (app.js:772), <anonymous>:3353:45) at createComponent (eval at <anonymous> (app.js:772), <anonymous>:4902:9) at createElm (eval at <anonymous> (app.js:772), <anonymous>:4845:9) at VueComponent.patch [as __patch__] (eval at <anonymous> (app.js:772), <anonymous>:5343:9) at VueComponent.Vue._update (eval at <anonymous> (app.js:772), <anonymous>:2324:19)handleError(unknown) [Vue warn]: Property or method 'user' is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.found in·····

實(shí)在是不懂？vuex剛?cè)腴T(mén)求教？

問(wèn)題解答

chat.js 中，我好像沒(méi)見(jiàn)過(guò)這個(gè)用法：

vuex: { actions: actions}

改成下面這種方式應(yīng)該就可以了

methods: { ...actions}

順便貼個(gè) vuex 官方關(guān)于組件中分發(fā) action 的文檔 https://vuex.vuejs.org/zh-cn/...，感覺(jué)樓主用的姿勢(shì)不對(duì)

disatch 是用來(lái)調(diào)用action的，調(diào)用mutation要用commit

export const actions = { initData: ({ commit }) => commit(’INIT_DATA’), sendMessage: ({ commit }, content) => commit(’SEND_MESSAGE’, content), selectSession: ({ commit }, id) => commit(’SELECT_SESSION’, id), search: ({ commit }, value) => commit(’SET_FILTER_KEY’, value)};