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 storeindex.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")更好,所以对于中大项目来说就必须用分块模式,分开管理不同的共享属性(公共抽象),新增的模块不会影响旧模块, 也更加方便管理; 好了,今天就说这么多,看不懂的同学可以多看几遍,慢慢理解。
发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。