問題描述

引入了一個(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)前用戶user: { name: ’coffce’, img: ’dist/images/1.jpg’},// 會(huì)話列表sessions: [ {id: 1,user: { name: ’示例介紹’, img: ’dist/images/2.png’},messages: [ {content: ’Hello，這是一個(gè)基于Vue + Vuex + Webpack構(gòu)建的簡(jiǎn)單chat示例，聊天記錄保存在localStorge, 有什么問題可以通過Github Issue問我。’,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ì)話currentSessionId: 1,// 過濾出只包含這個(gè)key的會(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ì)話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>

文件引入的問題是對(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求教？

問題解答

chat.js 中，我好像沒見過這個(gè)用法：

vuex: { actions: actions}

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

methods: { ...actions}

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

disatch 是用來調(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)};