内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

vuex中使用三个点...mapMutations的各种写法是什么意思

发布:2020-12-12 浏览: 评论(
首先我们要先知道三个点是什么意思...;简单点理解可以讲三个点看成就是省略号,省略号表示有些东西被隐藏了,用省略号就是表示这个对象是可以展开的,所以三个点ES6中也定义为扩展运算符或者展开运算符,好理解吧,那么想下面这部分代码又是什么意思呢?

index.vue文件
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 
export default{
methods: {
  //1
  ...mapMutations({
      add: "add",  //相当于在当前页面执行this.add()方法,就等于执行了this.$store.commit("add")
  }),
  //2
  ...mapMutations({
      plus: "add",//跟上面1一样当前页面执行this.plus()方法,就等于执行了this.$store.commit("add");plus相当于别名
  }),
  //3
  ...mapMutations([
      'add'  //跟1等同,另一种写法而已 ,这一整个方法展开就等于add(){this.$store.commit("add")},这样不就是methods里定义方法的形式吗?
  ]),
  //4
  ...mapMutations('filter', [
   'setValue' //意思是获取filter模块中mutation对象里的setValue方法,在这里展开,实际上就是setValue(){.........};至于setValue里面是什么代码,就看filter模块的mutation对象的这个方法定义了什么
  ])
  
  
},
computed:{
  //5
  ...mapState({
    value: state => state.filter.value //等于value(){return this.$store.state.filter.value}//filter模块中state对象中的value值
  })
  //6
  ...mapState('filter', {
    value: state => state.value//跟5是一样的意思:获取filter模块中的state里的value值,filter模块是存在整个mapState对象里的
  })
}
}
上面的...意思就是展开跟在后面的函数/方法/对象的内容,后面是一个整体,所谓展开简单来说就是去掉外面的中括号/大括号,举例:
//1、数组
let arr=[1,2,3,4,5]
//如果要赋值给新数组
let newArr = ...arr;//错误写法,因为...arr展开后是字符串:1,2,3,4,5
let newArr = [...arr];//正确写法 [1,2,3,4,5]

//JSON对象
let jsonObj = {a:function(){},b:()=>{}};
//展开
...jsonObj
//等于
a:function(){
},
a:()=>{
}
//然后你就发现...mapMutations为什么会这么写,这种写法不就是将里面的元素一个个排列出来吗,放在methods里面正是符合写法规则的
//这两个的写法是不是可以简化成:
a(){
},
b(){
}
//所以就跟mutation对象里的写法一样了,看下面的filter.js代码
//慢慢对照多几遍就能理解了

为了更深入的了解nuxtjs项目中vuex是如何跟.vue文件联系起来用的,基于上面的写法,我们看看filter.js这个模块的代码:
const state = ({
 value: 'Hello World',
 num:1,
 list:[1,2,3]
});

const mutations = {
 setValue(state, value) {
   state.value = value;
 },
 test(state,n){
   state.num = n;
 },
 do(state,n){
  state.list.push(n);
 }
};
 
export default {
 state,
 mutations
};
然后filter.js这个模块是要被引入到nuxtjs项目中的store文件夹下的index.js中进行统一引用的,index.js文件如下:
import Vue from 'vue';
import Vuex from 'vuex';
import filter from './filter';
 
Vue.use(Vuex);
 
const store = () => new Vuex.Store({
 state: {
 },
 mutations: {
 },
 modules: {
  filter
 }
});
 
export default store
index.js文件是将store对象暴露给所有.vue文件全局使用的,调用方法为this.$store或者直接store都可以调用,而filter则是分模块,需要在index.js中引入,如果还有其他模块也是一样的引入与使用方法; 理解了这个结构,我们就知道为什么是这么用的了,
对于其他的对象比如mapActions、mapGetters,其实都是一样的用法,只不过mapActions适用于放有异步(dispatch)操作的方法,mapMutations适用于同步(commit),这两个触发的方法分别是commit与dispatch。
vuex这个组件中的分块模式稍微复杂点,不过用于做大项目中不同组件间通信是很好的;普通经典模式对于组件间通信不是那么多的情况下是可以用的,不过nuxtjs3中之所以要去掉普通模式, 小编认为第一个原因是将所有共享对象都在一个文件里,会导致这个文件过大,另一个是因为很少的共享对象用普通模式还不如直接建立空vue对象,用bus来通信:this.$emit("a")与this.$on("a")更好,所以对于中大项目来说就必须用分块模式,分开管理不同的共享属性(公共抽象),新增的模块不会影响旧模块, 也更加方便管理; 好了,今天就说这么多,看不懂的同学可以多看几遍,慢慢理解。
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4