問題描述

引入了一個使用vuex流程的組件，提示disatch 調用的方法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: {// 當前用戶user: { name: ’coffce’, img: ’dist/images/1.jpg’},// 會話列表sessions: [ {id: 1,user: { name: ’示例介紹’, img: ’dist/images/2.png’},messages: [ {content: ’Hello，這是一個基于Vue + Vuex + Webpack構建的簡單chat示例，聊天記錄保存在localStorge, 有什么問題可以通過Github Issue問我?！?date: now }, {content: ’項目地址: https://github.com/coffcer/vue-chat’,date: now }] }, {id: 2,user: { name: ’webpack’, img: ’dist/images/3.jpg’},messages: [] }],// 當前選中的會話currentSessionId: 1,// 過濾出只包含這個key的會話filterKey: ’’ }, mutations: {INIT_DATA (state) { let data = localStorage.getItem(’vue-chat-session’); if (data) {state.sessions = JSON.parse(data); }},// 發送消息SEND_MESSAGE ({ sessions, currentSessionId }, content) { let session = sessions.find(item => item.id === currentSessionId); session.messages.push({content: content,date: new Date(),self: true });},// 選擇會話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>

文件引入的問題是對的， 為什么會提示

[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·····

實在是不懂？vuex剛入門求教？

問題解答

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

vuex: { actions: actions}

改成下面這種方式應該就可以了

methods: { ...actions}

順便貼個 vuex 官方關于組件中分發 action 的文檔 https://vuex.vuejs.org/zh-cn/...，感覺樓主用的姿勢不對

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