三个点ES6中也定义为扩展运算符或者展开运算符。
1、在vuex中定义同步方法
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
let store = new Vuex.Store({
state: {
name: 'hahahah',
age: '19',
},
mutations: {
changeName(state, params) {
console.log(params);
state.name = params.name
},
changeAge(state, params) {
state.age = params.age
}
},
})
export default store
2、在组件中调用同步方法
1.在组件中导入vuex中的mapMutations:
1.//引入vuex(mapMutations主要是传递参数,辅助函数)
import { mapMutations } from "vuex"
2.在methods下使用…引用
methods: {
...mapMutations(['changeDetail']),
}
3.在需要存入vuex的时候调用
this.changeDetail(data)
这样就可以实现同步vuex存储的数据了。
4.完整的demo示例
<template>
<div>
<h4>这里是son1组件</h4>
name:{{name}}
age:{{age}}
<button @click="hehe">改名字</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
data() {
return {
list: {
name: "6666"
}
};
},
computed: {
...mapState(["name", "age"])
},
methods: {
hehe() {
this.changeName(this.list);
},
...mapMutations(["changeName"])
}
};
</script>
<style>
</style>
5.当然,也可以写直接传递
state.age = params
html中使用
<button @click="changeName(555555)">改名字</button>