参考文章:点击事件获取。这里没有用父子组件就是了,没那么复杂。
目的:点击获取输入,增加Vuex中的state共享值。
要求:通过点击事件--mutation--state
方式改变值。
// App.vue
<template>
<div id="app">
<h4>{
{$store.state.counter}}</h4>
<input
type="text"
@input="getInput"
>
<button @click="clickAdd()">增加数量</button>
</div>
</template>
<script>
import {
INCRECOUNT } from "./store/mutation-types";
export default {
name: "App",
components: {
},
data() {
return {
addNum: 1
};
},
methods: {
clickAdd() {
this.$store.commit({
type: INCRECOUNT,
count: this.addNum,
});
},
getInput(event) {
this.addNum = event.target.value;
},
},
};
</script>
<style>
</style>
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Mutation from './mutations'
import {
INCRECOUNT} from './mutation-types'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
counter: 0
},
mutations: {
[INCRECOUNT](state, payload){
console.log(payload.count)
state.counter += parseFloat(payload.count);
}
},
actions:{
},
getters:{
},
modules:{
}
});