1022 vuex Three Day mapState and mapMutations_综合

1022 vuex Two day

主要讲

ECharts 有问题，多去看看 package.js 看版本号,毕业设计有问题的话问老师
store 拆分成模块。使用常量替代 Mutation 事件类型,创建 mutations-types.js ,存储 mutation 的常量 const 定义的东西都时不能修改的，所以用来定义常量，对象除外，因为对象存储的是地址，不是值。
Mutation 必须是同步函数
... 展开运算符。 ...mapMutations(['updateArr']) 是拷贝一个数组,换名的话用对象的方式去写
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 功能。
使用：

在组件中导入 import mapMutations from 'vuex'
在 methods 使用 mapMutations,由于 mapMutations 会返回一个对象，将映射的 mutation 的方法装到 mapMutations 内，所以我们需要加 … 拆分。
在点击事件中也不需要之前的 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;},}),