<template>
  <div>
    <h2>-------calculate.vue-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button v-on:click="$store.state.counter++">+</button>
    <button v-on:click="$store.state.counter--">-</button>
  </div>
</template>

$store.state.counter++或者$store.state.counter--不就可以了么?
虽然, 这样也能达到效果, 但是Vuex官网推荐我们不要这样使用, 原因是, 这样操作完, 我们不能跟踪到状态的变化. 这是什么意思呢, 这就要来看看vuex的设计思想了.

2.5 Vuex式的设计思想

Vuex实质是单例模式的设计思想

• 将共享的状态抽取出来, 交给大管家, 进行统一管理
• 之后, 每一个视图, 按照规定好的规则, 执行访问或修改等操作.
• 这就是vuex背后的思想.

这里规定好的规则很重要. 规定好的规则是什么规则呢? 我们来看一下vuex官方给出的一个图

这里面一共有5个元素

• Vue compontents
  
• State
  
• Mutations
  
• Action
  
• Devtools
  
  这几个部分都是做什么用的呢?

1. Vue Components

在这个图里面绿色的部分是Vue compontents(Vue组件), Vue组件可以引用state变量, 还可以触发操作修改变量的值.

2. State:

State用来存储的是变量, 变量值可以直接渲染到Vue组件上, 但是约定好的, Vue组件不可直接修改State的值

3. Mutations 和 Devtools

如果Vue组件想要修改state中的状态, 他不能直接修改State, 而是需要执行commit, 提交到Mutations, 由Mutations触发修改state的状态. 为什么要这样呢? 这就和Devtools有关系了.

我们看到有一块灰色的Devtools, 这是什么呢? 这是Vue开发的一款浏览器插件. 这个插件可以帮助我们记录每次state中变量修改的状态, 为什么要记录state的状态呢?

比如, 我们有多个组件同时修改vuex中的一个状态, 那么大家都来改, 最终这个值是谁改的呢? 如果没有记录状态变化, 那么我们就不知道是谁改的了. Vue提供的Devtools工具, 就可以用来记录每次修改的状态.

但是, 如果我们直接修改组件, 那就没有经过Devtools的流程, Devtools也就记录不了了. 也就是直接从state修改变量值(红色箭头), 而不是走蓝色箭头的流程, 那么没有经过Devtools, Devtools也不能记录上修改的状态了.

4. Action

Action主要是用来进行异步处理操作的. mutations是用来处理同步操作的, 所以, vue组件想要修改变量的时候, 直接走mutations就可以了, 这样也可以通过Devtools来记录修改情况. 但是, 如果异步怎么办呢? devtools只能用来记录同步状态, 如果出现异步, 他就记录不了了. 所以, 这里多了一个action. action就是用来处理异步操作的. 当action处理完了以后, 再交给Mutations来处理, 这时候就是同步的操作了, Devtools也可以处理了.

什么情况会进行异步操作呢?
发送网络请求. 所以在Action模块指向了BackEnd, 向后端发送网络请求.

2.6 Devtools的使用

1. 安装Devtools

下面我们就来安装Devtools
打开google浏览器, 点击右上角三个点-->更多工具-->扩展程序-->打开Chrome网上应用店-->搜索Devtools, 如下图:

找到VueJs的Devtools-->添加至Chrome, 如下图:

然后安装插件即可.

2. 使用Devtools跟踪状态

Chrome安装好Devtools以后,打开控制台, 在菜单栏最后多了一个vue, 点开可以看到如下界面:

其中,第二个按钮是监控变量状态变化的.

我们如果直接使用$store.state.counter++, 在Devtools是无法监控状态变化的,但是如果我们使用mutations就可以监控到状态变化.

3.在mutation中修改counter的值

首先, 我们是要在页面实现+和-的逻辑, 如下图:

这个逻辑在calculate.vue组件会用到, 在App.vue组件也会用到, 因此我们将其定义在vuex插件中. 在插件里面定义两个方法:increase()和decrease(), 修改变量counter的值

const store = new Vuex.Store({
  state: {
    counter: 100
  },
  mutations: {
    increase(state) {
      state.counter ++;
    },
    decrease(state) {
      state.counter --;
    }
  }
})

这两个方法increase()和decrease(), 他们自带的参数就是state.

在调用方如何定义呢? 也就是calculate.vue和App.vue中应该如何使用Vuex中定义的两个mutations方法呢?

<template>
  <div>
    <h2>-------calculate.vue-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button v-on:click="add()">+</button>
    <button v-on:click="sub()">-</button>
  </div>
</template>

<script>
    export default {
        name: "calculate",
      data() {
          return {

          };
      },
      methods: {
        add() {
          this.$store.commit("increase");
        },
        sub() {
          this.$store.commit("decrease")
        }
      }
    }
</script>

在调用方, 我们要使用this.$store.commit()的方式来提交变更.

在左侧点击+或-,在右侧devtools都会记录每一次状态变化.

2.7 总结

Vuex 应用的核心就是 store（仓库）, “store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

四. Vuex的核心概念

Vuex的核心概念一共有5个

• State
• Getter
• Mutations
• Action
• Modules

这几个概念: 其中State, Mutations, Action上面都有提高过. 下面重点来看看Getter和Modules. 在看Getter之前先来看一个概念: 单一状态树

4.1 单一状态树

什么是单一状态树呢?

比如我们的个人信息,社保信息存在社保系统里, 公积金信息存在公积金系统里, 医保信息存在医保系统里. 这有有好处也有坏处, 好处是信息更安全,彼此隔离; 坏处是要是办某一件事,想要所有的信息, 就要跑很多地方取.

而单一状态树的含义就是将所有的信息都存在一个store中, 如果需要什么数据, 直接去那一个store中取就好了. 不要在系统中定义多个store, 这样不方便管理和维护.

单一状态树的含义: 在一个项目只建一个store.

4.2 Getter的使用

Getter有些类似于compute计算属性. 什么时候使用计算属性呢? 当我们需要将一个属性的值经过计算以后显示出来, 这时候我们通常使用计算属性.

Getter也是如此: 当一个state属性需要计算以后显示出来, 我们就可以使用Getter属性.
比如现在要计算counter的平方.

如果不使用计算属性,我们怎么做呢? 在calculate.vue组件里我们是这么写的.

<h2>{{$store.state.counter * $store.state.counter}}</h2>

1. 使用计算属性计算平方

然后, 如果在App.vue中也要这么用, 就再来一段. 观察: 这代码很长, 不利于维护, 我们可以将其放到Getter中. 统一计算以后返回

const store = new Vuex.Store({
  state: {
    counter: 100
  },
  mutations: {
    increase(state) {
      state.counter ++;
    },
    decrease(state) {
      state.counter --;
    }
  },
  getters: {
    // getter中第一个参数是state
    powerCounter(state) {
      return state.counter * state.counter
    }
  }
})

这里定义了一个计算平方的方法powerCounter(), 他的第一个参数是state, 所以, 我们可以直接拿到counter属性进行操作. 接下来在调用方如何调用呢?

 <h2>{{$store.getters.powerCounter}}</h2>

通过$store.getters.powerCounter获取计算属性.

2. 在getters中定义方法的第二个参数

如果我们在另一个方法里想要使用其他getters计算方法怎么办呢? 在getters中定义的方法还有默认的第二个参数getters
例: 计算counter的平方 + 100
这时候我们可以怎么做呢? 如下定义了powerAndAdd方法, 其第二个参数默认是getters.

getters: {
    // getter中第一个参数是state
    powerCounter(state) {
      return state.counter * state.counter
    },

    powerAndAdd(state, getters) {
      return getters.powerCounter + 100
    }
  }

我们在powerCounter已经做了平方的操作了, 接下来我们可以直接使用这个的结果来计算.
在powerAndAdd方法中, 第一个参数依然是state, 第二个参数是getters. 我们可以通过getters获取到第一个方法powerCounter, 然后在第一个方法的基础上+100.

在calculate.vue组件中调用powerAndAdd方法

<template>
  <div>
    <h2>-------calculate.vue-------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button v-on:click="add()">+</button>
    <button v-on:click="sub()">-</button>
    <h2>counter取平方: {{$store.getters.powerCounter}}</h2>
    <h2>平方后+100: {{$store.getters.powerAndAdd}}</h2>
  </div>
</template>

最终效果如下:

3. 在getters中自定义带参数的方法

在getter中, 前面说了, getters中定义的方法, 第一个参数是state, 第二个参数是getters. 这两个都是默认的. 如果我有一个方法想要传自定义参数怎么办呢?
不能直接在getters后面添加, 可以使用匿名函数接收自定义参数. 比如下面的add方法

getters: {
   // getter中第一个参数是state
   powerCounter(state) {
     return state.counter * state.counter
   },

   powerAndAdd(state, getters) {
     return getters.powerCounter + 100
   },

   add(state, getters) {
     return (num1, num2) => num1 + 100 + num2;
   }
 }

在使用的时候, 直接传递两个参数就可以了,方法如下:

<h2>累加+100: {{$store.getters.add(200, 500)}}</h2>

4.3 Mutations的使用

1. Vuex中store状态修改的唯一方式: 提交Mutations

1. Mutations 主要包含两部分

• 一部分是事件类型(type)
• 另一部分是回调函数(handler), 回调函数的第一个参数是state

例如:

mutations: {
    increase(state) {
      state.counter ++;
    },
    decrease(state) {
      state.counter --;
    }
  }

我们可以理解为increase是事件类型type, 方法体是回调函数. 回调函数的第一个参数是state

mutations方法定义好以后, 如果我们想要调用, 使用commit提交的方式调用

add() {
  this.$store.commit("increase");
},

2.Mutations传递参数

在之前计算页面有一个+和-, 如果需要+5, +10, -100这时候怎么处理呢? 我们需要定义一个方法, 接收参数 在Mutation中如何定义参数, 又如何传递参数呢?

在Mutation中有两种数据提交的方式

1. 第一种数据传递的方式

我们来看看步骤:
第一步: 在calculate.vue组件定义两个按钮, 一个+5, 一个加 +10

    <button v-on:click="addCount(5)">+5</button>
    <button v-on:click="addCount(10)">+10</button>

在定义一个方法addCount()

     methods: {
            add() {
              this.$store.commit("increase");
            },
            sub() {
              this.$store.commit("decrease")
            },
            addCount(num) {

            }
    }

第二步: 在store中定义一个mutation方法, 并且接收一个参数, 如下increaseCount

mutations: {
    increase(state) {
      state.counter ++;
    },
    decrease(state) {
      state.counter --;
    },
    increaseCount(state, num) {
      state.counter += num;
    }
}

increaseCount()方法第一个参数是state, 我们可以用第二个参数来接收变量. 这和getter是不一样的, getter需要写一个匿名函数来接收自定义变量
第三步: 在定义好的calculate组件中调用store的increaseCount方法

        addCount(num) {
          this.$store.commit("increaseCount", num)
        }

在传递参数的时候, 我们将自定义参数放在第二个变量位置.

第四步: 查看效果

1. 第二种数据传递的方式

第一种数据传递的方式是具体的参数, 第二种数据传递的方式传递的是对象. 我们来看看第二种

下面来对比比较:
之前使用的是直接传递参数的方式

        addCount(num) {
          this.$store.commit("increaseCount", num)
        },

使用对象传递参数怎么写呢?

addCount(num) {
          this.$store.commit({
            type: "increaseCount",
            num: num
          })
        },

需要注意的是, 写法不同, 含义有略有区别.

• 方式一传递到mutation中的是具体的参数值.
• 方式二传递到mutation中的是一个对象.

同样是在mutation中定义方法, 并接受一个参数obj

 increaseCount(state, obj) {
      console.log(obj);
  },

第一种方式传递过来的是:

可以看到传递过来是具体参数的内容

第二种方式传递过来的是一个对象

观察右侧控制台, 传输传递过来的是一个对象, 并且是所有参数的对象. 所以, 如果增加num数字, 需要获取obj.num

    increaseCount(state, obj) {
      console.log(obj);
      state.counter += obj.num;
    },

3. Mutation的响应规则

Vuex的store的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
但是, 需要准守对应的规则

1) 增加新属性

比如: 我们修改info的name参数.先来看效果

第一步: 在store/index.js的state中定义变量info, 并定义修改info的方法updateInfo

const store = new Vuex.Store({
  state: {
    info: {
      name: "王五",
      age: 58,
      sex: "男"
    }
  },
  mutations: {
    updateInfo(state, name) {
      // 修改info中name的值
      state.info["name"] = name;
    }
  }
})

第二步: 在calculate.vue中展示info内容, 并修改info的内容

<template>
  <div>
    <h2>-------calculate.vue-------</h2>
    <h2>info: {{$store.state.info}}</h2>
    <button v-on:click="updateInfo">修改name</button>
  </div>
</template>

<script>
    export default {
      name: "calculate",
      methods: {
        updateInfo() {
          this.$store.commit("updateInfo", "赵六")
        }
      }
    }
</script>

这里直接调用的是store中的mutation方法updateInfo(). 在updateInfo()方法中, 使用state.info["name"]=name的方式重置了name的值,并且在页面立刻响应式的看到了效果

但是, 不是在任何情况使用state.info["name"]=name赋值都是响应式的, 我们来给info增加一个hobby试一试
第一步: 在store/index.js中增加mutation方法, 添加爱好hobby, hobby属性之前在info中是没有的

    updateInfoHobby(state, hobby) {
      state.info["hobby"] = hobby
      console.log(state.info)
    }

第二步: 定义方法修改hobby

        updateInfoHobby() {
          this.$store.commit("updateInfoHobby", "篮球")
        }

第三步: 看效果

我们发现, 点击按钮添加hobby以后, 页面并没有响应式的添加hobby, 但是在右侧控制台看到$store.info中确实已经有hobby属性.

这就是我们要说的Mutation修改state属性的第一个条件:
要想实现响应式展示, 需要提前在store中初始化好属性. 如果有些属性是动态添加的, 提前不知道怎么办呢? 我们需要换一种方式添加

updateInfoHobby(state, hobby) {
      Vue.set(state.info, "hobby", hobby);
    }

来看看效果:

还有一种方式: 就是使用完整的新对象给就对象赋值.

总结:

1. 提前在store中初始化好需要的属性
2. 当给state中的对象添加新属性的时候,使用下面的方式
            方式一:使用Vue.set(obj, newProp, value)
   
            方式二: 用新对象给就对象赋值

2) 删除属性

当我们需要删除属性的时候, 也是使用Vue.delete(obj, prop)可以做到响应式展示

4. Mutation的类型常量

在mutation中, 我们定义了很多事件类型(也就是方法名), 当我们的项目变大时, vuex管理 状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多. 方法多了,名称就容易出错, 所以我们将Mutation中的常量提取出来. 放在一个公共文件中定义,下面来看看如何实现:
以修改counter方法为例. 我们来将自增方法increase提取出来.

第一步: 新增一个mutation-types.js 文件, 定义一个常量INCREASW

export const INCREASW = "increase"

第二步. 在store的mutation中使用常量定义方法名

// 引入mutation
import { INCREASW} from './mutation-types'

const store = new Vuex.Store({
 mutations: {
    [INCREASW](state) {
      state.counter ++;
    }
 }
})

这里使用[]来定义方法名, 作为变量传入.

第三步: 在calculate.vue中引入mutation-types并且使用commit提交到mutation

 import {INCREASW} from '../store/mutation-types'
        add() {
          this.$store.commit(INCREASW);
        },

这样就提取了变量. 当需要修改变量名的时候, 我们不用每个地方都修改, 只需要修改mutation-types中的变量名的值.

5 Mutation同步函数

通常情况下, Vuex要求我们Mutation中的方法必须是同步方法. 为什么呢?
主要的原因是, 当我们使用devtools工具时, devtools工具可以很好的帮我们捕捉mutation的快照. 但如果是异步操作, 那么devtools将不能很好地追踪到这个操作是什么时候完成的.

举个例子:
我们将[修改name]这个动作进行异步处理. 放在setTimeout中,

   updateInfo(state, name) {
      setTimeout(function(){
        state.info["name"] = name;
      }, 1000)
    }

然后点击[修改name]按钮, 会发现将王五的名字改为赵六, 页面改了, 但是在devtools工具中没有改, 如下图:

这个问题就是上面说的, 在Mutation中尽量不要执行异步操作, 要是执行异步操作, devtools可能跟踪不上.
如果确实有异步操作, 那么就使用action. action的功能类似于Mutation, 但是它主要是处理异步操作的. 下面就来看看Action的使用

4.4 Action的使用

上面已经说过了, action的用法和Mutation的用法类似. 但action主要是处理异步操作. 如何将写在mutation中的updateInfo方法中异步操作替换到action中实现呢?

在mutation中定义的方法

    updateInfo(state, name) {
      setTimeout(function() {
        state.info["name"] = name;
      }, 1000)
    }

在action中定义的方法

actions:{
    aUpdateInfo(context) {
      setTimeout(function () {
        context.commit("updateInfo")
      }, 1000)
    }
  },
mutations: {
    updateInfo(state, name) {
      state.info["name"] = name;
    }
}

我们定义了一个和updateInfo对应的方法 aUpdate. 入参是context, 注意这里不是state了, 而是整个store. 异步操作定义在aUpdate方法中, 然后调用Mutation中的方法.
注意: 这是官方要求的, action不要自己去修改state, 所以修改state的操作都在Mutation中进行.

接下来, 在按钮[修改name]的时候, 重新定义click事件, 这次就不能直接指向mutation了, 而是要指向action.
* 调用mutation的方法使用: this.$store.commit(...)
* 调用action的方法使用: this.$store.dispatch(...)

    updateInfo() {
      // 调用mutation
      // this.$store.commit("updateInfo", "赵六")
      // 调用action
      this.$store.dispatch("aUpdateInfo", "赵六")
    },

效果如下图所示:

可以看到这会devtools识别了info信息的变化

4.5 Module的使用

Module的含义是模块, 我们为什么要在Vue中引入模块呢?

1. Vue使用的是单一状态树, 那么也就是说很多状态会交给vuex来管理
2. 当应用变得复杂是, store也会变得很臃肿,
   为了解决这个问题, Vuex允许我们将store分割成模块. 每个模块都拥有自己的states, mutations, actions, getters 等等

写法如下:

const store = new Vuex.Store({
  modules:{
    a:{
      state: {

      },
      getters:{

      },
      mutations:{

      },
      actions: {

      }
    },
    b: {

    }
  }
})

如上, 在store中定义了一个modules, 里面有两个模块a和b, a模块中定义了一套getters, states, mutations, actions, b模块也可如此定义

那么定义好以后如何使用呢? 下面一个一个来看

1. state调用

在store/index.js文件中定义一个moudules, 然后定义state

const module1 = {
  state: {
    message: "这是定义在module1中的state"
  },
}

const store = new Vuex.Store({
  modules:{
    module1: module1
  }
}

如上展示, 如何调用module1中的message呢?

    <h2> message : {{$store.state.module1.message}} </h2>

2. getter 调用

在module1中增加getters

const module1 = {
  state: {
    message: "这是定义在module2中的state"
  },
  getters:{
    extraMessage: function(state){
      return state.message + "aaaa";
    }
  }
}

前面介绍过getters中定义的属性, 就相当于computed计算属性.
接下来看看如何调用getters中的计算属性呢?

<h2> extraMessage: {{$store.getters.extraMessage}}</h2>

在调用的时候, 和state有些不同. 这里不需要指定modules模块名. 首先回去store中定义的getters查找, 抄不到再去modules1模块中查找,所以, 我们在定义的时候,尽量不要重名

3. mutation的调用

我们定义一个按钮来更新 message的值

const module1 = {
  state: {
    message: "这是定义在module2中的state"
  },
  getters:{
    extraMessage: function(state){
      return state.message + "aaaa";
    }
  },
  mutations:{
    changeMessage: function(state) {
      state.message = "替换成新的message"
    }
  },
  actions: {

  }
}

接下来看调用方, 定义一个按钮, 替换message的值. 然后changeMessage

<button v-on:click="changeMessage">替换message</button>

        changeMessage() {
          this.$store.commit("changeMessage")
        }

我们看到在调用mutation中的方法的时候, 直接使用的是 commit. 和调用store中mutation是一样的.
这里还可以传递参数, 方式方法也和在store中一样

4. action的调用

我们在修改message信息的地方将其设置为异步修改, 写法如下:

const module1 = {
  state: {
    message: "这是定义在module2中的state"
  },
  getters:{
    extraMessage: function(state){
      return state.message + "aaaa";
    }
  },
  mutations:{
    changeMessage: function(state) {
      state.message = "替换成新的message" + ", bbbb";
    }
  },
  actions: {
    aChangeMessage: function(context) {
      setTimeout(() => {
        context.commit("changeMessage")
      }, 1000)
    }
  }
}

在actions中增加了一个setTimeout, 这就是异步的. 调用方在调用的时候, 需要使用dispatch指向actions的方法

        changeMessage() {
          this.$store.dispatch("aChangeMessage")
        }

以上就是在modules中定义states, getters, mutations, actions的方法的使用

至此Vuex的用法就全部完事了.

bk

上一篇：python 绘制斜率图进行对比分析

下一篇：没有了