javascript - vuex 使用dispatch 提示not found?

问题描述

引入了一个使用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)};