Играюсь с небольшими приложениями, использующими vuex, возник вопрос о том, как правильно передавать event в vuex.
Вот какой у меня пример. У меня есть канвас, рядом с ним высвечиваются координаты курсора над канвасом. Всё работает в классическом варианте:
<div>
<canvas id="cnv" height="300" width="600" v-on:mousemove="coord"></canvas>
</div>
<div id="status_bar">
<div>X: {{ coordX }}</div>
<div>Y: {{ coordY }}</div>
</div>
<script>
export default {
name: "Main",
data() {
return {
coordX: 0,
coordY: 0
};
},
methods: {
coord(event) {
var canvas = document.getElementById("cnv");
var rect = canvas.getBoundingClientRect();
this.coordX = event.clientX - rect.left;
this.coordY = event.clientY - rect.top;
}
}
};
</script>
Однако, когда я попробовал перенести код на vuex - не удаётся из action вызвать мутацию с параметрами:
<template>
<div class="Main">
<div>
<canvas id="cnv" height="300" width="600" v-on:mousemove="coord"></canvas>
</div>
<div id="status_bar">
<div>X: {{ $store.state.cur.X }}</div>
<div>Y: {{ $store.state.cur.Y }}</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "Main",
methods: mapActions([
'coord'
]),
};
</script>
Файл store/index.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
cur: {
X: 0,
Y: 20
},
}
const mutations = {
coord(pos) {
state.cur.X = pos.X;
state.cur.Y = pos.Y;
}
}
const actions = {
coord({ commit }, event) {
var canvas = document.getElementById("cnv");
var rect = canvas.getBoundingClientRect();
var pos = {
X: event.clientX - rect.left,
Y: event.clientY - rect.top,
};
console.log(pos);
//commit('coord');
//commit('coord', pos);
//store.commit('coord', pos);
//store.dispatch('coord', pos);
}
}
const getters = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
Там после console.log закомментированные строки - мои неудачные попытки вызова.
Перечитываю документацию по мутациям и действиям, однако не понимаю, как собрать вызов в целое.
в файле main.js, подключили store? Кроме того, в коде не видно, где Вы диспатчете действие
Подключил:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
main.js
, подключили store? Кроме того, в коде не видно, где Вы диспатчете действиеvue init webpack