1022 vuex Two Day mapState and mapMutations

1022 vuex Two day

主要讲

1. ECharts 有问题，多去看看 package.js 看版本号,毕业设计有问题的话问老师
2. store 拆分成模块。使用常量替代 Mutation 事件类型,创建 mutations-types.js ,存储 mutation 的常量 const 定义的东西都时不能修改的，所以用来定义常量，对象除外，因为对象存储的是地址，不是值。
3. Mutation 必须是同步函数
4. ... 展开运算符。 ...mapMutations(['updateArr']) 是拷贝一个数组,换名的话用对象的方式去写
5. mapState 辅助函数跟 mapMutations 辅助函数的用法一样
6. mapstate mapmutations 常量 同步函数这四者应该是今天所交内容四边形

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

mutatios-type.js 就是把 mutations 里面的方法名写到新的 js 文件里面，然后我就在 store.js 里面用的时候就从 mutation-type.js 里面导入，如果组件内要用的话也是组件内导入一下。
现在觉得有点麻烦了，现在要把方法拿到另一个 js 里面去，需要的时候还要调用，特别麻烦。
好处：用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

mutation-type.js 用来存储 mutation 函数名常量

// 用来存储 mutation 函数名常量

// 写上一些注释这个变量是干什么的。
export const ADD = "ADD";
export const CHANGE = "CHANGE";

以后 state 里面的数据有十个，但是修改 state 的数据方法有五十个，那么这样就会很乱。所以要把 store 拆分成模块。 登录功能的是一组，注册的是一组。
会在 mutatios-type.js 里面会写上一些注释这个变量是干什么的。

Mutation 必须是同步函数

用 arr 空数组加 setTimeout 测试
数组未发生任何变化

• 一条重要的原则就是要记住 mutation 必须是同步函数。

getarr(state) {
  // mutation 函数只能是同步函数，不能存在异步操作
  // setTimeout(() => {
  state.arr = [1, 2, 3];
  // }, 2000);
},

解决方案：在 created 中添加 setTimeout 异步执行，数组出现。

created() {
  setTimeout(() => {
    this.$store.commit("getarr");
  }, 2000);
},

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交 Mutation

• commit
• mapMutations

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
mapMutations 在 vuex 里面。

解释：去 vuex 中拿 mapMutations 函数，这个函数的功能是可以将 store 中的 mutation 映射成组件的 methods 并且映射的 methods 内部自带 commit 功能。
使用：

1. 在组件中导入 import mapMutations from 'vuex'
2. 在 methods 使用 mapMutations,由于 mapMutations 会返回一个对象，将映射的 mutation 的方法装到 mapMutations 内，所以我们需要加 … 拆分。
3. 在点击事件中也不需要之前的 methods 方法了，用 mapMutations 映射 mutation 过来的方法作为点击触发事件的方法。

• …mapMutations([CHANGE])

<button @click="ADD(999999)">点击传给数据参数 123546</button>
<button @click="CHANGE({num1:'我是num1'})">显示{{ num12 }}</button>

handleUpdate2() {
  this.$store.commit(ADD, 123456);
},
handleUpdate3() {
  this.$store.commit({
    type: CHANGE,
    num1: "我是 num1",
  });
},

mapMutations 的数组语法
只能映射成 methods 才带 commit 功能
其他地方想要用只能使用 this.$store.commit 获取。

...mapMutations([ADD,CHANGE]),
// [ADD](payload){
//   // 这里面是使用 commit 提交重名的 mutation ADD
// },
// [CHANGE](payload){
//   // 这里面是使用 commit 提交重名的 mutation CHANGE
// },

mapMutations 的对象语法
主要和数组区分 该用法可以给组件内的方法起名字
上面的点击事件也要改成 handle1 handle2

...mapMutations({
  handle1:ADD,
  handle2:CHANGE
})

mapSate 辅助函数

import { mapMutations, mapState } from "vuex";

• mapState 的作用就是将 store 内的某些数据映射成组件的 computed
• mapState 函数会返回一个对象，对象内是想要的计算属性

  num() {
    return this.$store.state.num;
  },
  num12() {
    return this.$store.state.num1;
  },
  getarr() {
    return this.$store.state.arr;
  },

mapState 数组语法

  ...mapState(["num", "num1", "arr"]),

• mapState 对象写法
  第一种对象写法

  ...mapState({
    number: "num",
    number1: "num1",
    numberArr: "arr",
  }),

第二种对象写法

• 可以将属性值写成一个函数，该函数默认接收 state 作为参数，让函数返回自己需要的 state 即可。
• 这个函数也可以写成普通函数和箭头函数:区别在于普通函数内可以使用 this. 箭头函数内不可以使用 this
• 这个新的计算属性需要用到 store 内的和组件局部的 data 时需要定义成普通函数

  ...mapState({
    num:(state) => state.num,
    num1:(state) => state.num1,
    arr:(state) => state.arr
  })

• 如果有自己的一个 data 的话就用普通函数

 ...mapState({
   num(state) {
     return state.num + this.a;
   },
   num1(state) {
     return state.num1 + this.a;
   },
   arr(state) {
     return state.arr;
   },
 }),

mutation

mutation 是函数，这个函数用来修改 store 内的数据的。想要调用这个 mutation 函数的话，比必须使用 store 内的 commit 方法。
创建

const store = new Vuex.Store({
  state:{
    num:0
    ......
  }
  mutations:{
    // mutation 函数
    // mutation 函数只能接收两个参数
    // mutation 函数默认第一个参数是 state,mutation 函数内部直接对 state 内的数据进行修改。
    // mutation 函数第二个参数是 payload,修改 state 需要的额外内容，也就是传参，一般写成对象类型。
    // mutation 函数必须是同步函数，里面不能加异步操作。
    add(state){
      state.num++
    },
    change(state,payloda){
      state.num = payload.newNum
    }  
  }
})

组件内使用

// 1. 使用 this.$store.commit 去提交 mutation
this.$store.commit('add')
this.$store.commit({
  type:'add'
})
this.$store.commit('change',{newNum:1000})  //带载荷的
this.$store.commit({
  type:'change',
  newNum:1000
})

// 2. vuex 提供了 mapMutations 辅助函数
// 就是将 store 内的 mutation 函数，映射成组件内的 methods ，并且内部自带 commit 功能。
import { mapMutations } from 'vuex'
export default {
  //  ....
  methods:{
    ...mapMutations(['ADD','CHANGE']),
    ...mapMutations({
      handle1:'ADD',
      handle2:'CHANGE'
    })
  }
  // 如果 methods 内没有其他的方法可以写成下面的方式
  methods:mapMutations({
      handle1:'ADD',
      handle2:'CHANGE'
    })
}