复习Vuex

介绍:Vuex是一个转为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相对的规则保证状态以一种可预测的方式发生变化。 

一.什么是"状体管理模式"

让我们从一个简单的Vue计数应用开始：

const Counter = {
  // 状态
  data () {
    return {
      count: 0
    }
  },
  // 视图
  template: `
    <div>{{ count }}</div>
  `,
  // 操作
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

这个状态管理应用包含一下几个部分

状态：驱动应用的数据源

视图:以声明方式将状态映射到视图

操作:响应在视图上的用户输入导致的状态变化。

以下是一个表示"单向数据流"理念的简单示意:

但是，当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

1.多个视图依赖于同一状态。

2.来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护代码。

 

解析:从图中可以看出，在State里面定义变量，在Mutations里面定义修改State的方法，且是唯一的,Action,用英文翻译过来它的意思就是行动的意思，在这里面可以定义一些异步的方法，总共是有五种的，还有getter，module，getter，类似于computed计算属性，module将js的文件抽离出来，抽离出来的注意点是什么呢？如果是本模块就不需要在前面加上模块名，不是本模块需要加上模块名，在进行触发。

通常的调用形式是什么样子的呢？

触发Muaction，里面的方法，在页面上触发，this.$store.commit（'方法的名字'）

触发Action，里面的方法，在页面上触发，this.$store.dispatch（'方法的名字'）

在Action里面也有两个参数，store，commit，可以通过这两个来调用，Muaction里面的方法，

放一些异步的ajax请求 ，然后在页面上通过this.$store.dispatch来触发，在Action里面继续触发Muaction里面的方法, 从而修改在state里面的变量。在state定义的变量，在任意的组件上都能进行

使用，这样一来我们就可以模拟一个触发。

举个例子来说

 解决了,多个视图依赖于同一状态的问题。