关于javascript:Vuex一-集中式的状态管理仓库

目录

• Vue 组件间通信形式回顾

  • 组件内的状态治理流程

  • 组件间通信形式

    • 父组件给子组件传值 (最简略的一种形式)
    • 子组件给父组件传值
    • 不相干组件之间传值
    • 其余常见形式($ref)

• 繁难的状态治理计划

  • 下面组件间通信形式的问题
  • 集中式的状态治理计划

• Vuex

  • 什么是 Vuex?

  • 什么状况下应用 Vuex?

    • 非必要的状况不要应用 Vuex
    • 中大型单页应用程序应用更好
  • Vuex 外围概念回顾
  • Vuex 根本构造
  • State 的应用
  • Getter 的应用

  • Mutation 的应用

    • Mutation 的调试

      • 时光旅行
      • 状态回滚
      • 提交扭转
  • Actions 的应用

  • Modules 的应用

    • 模块定义
    • 模块注册
    • 模块应用
    • 增加命名空间
  • Vuex 严格模式

  • Vuex 插件

    • 插件的应用

年底最初一天来原本没有想更博客，然而留下我往年还在努力学习的印记哈哈。看了半天这竟然是我第一个对于 vue 的博客，致力不算晚。先来对这个博客的内容进行一下梳理，有趣味的小伙伴能够跳到本人感兴趣的中央，这个博客比拟长，长文正告。

Vue 组件间通信形式回顾

组件内的状态治理流程

Vue 最外围的两个性能：数据驱动 和 组件化

应用基于组件化的开发，能够进步开发效率，带来更好的可维护性。

new Vue({
    // state 组件外部都能够治理本人的外部状态
    data () {
        return {count: 0}
    },
    // view 视图，每个组件都有本人的视图，把状态绑定到视图上，当用户和视图交互的时候，可能会更改状态
    template: `<div>{{count}}</div>`,
    // actions 行为，这里形容的是单个组件外部的状态治理，理论开发中可能多个组件能够共享状态
    methods: {increment () {this.count++}
    }
})

这里说的状态治理 —— 是通过状态，集中管理和散发，解决多个组件共享状态的问题。

• state：状态，数据源。
• view：视图。通过把状态绑定到视图出现给用户
• actions：用户和视图交互扭转状态的形式

图中表明，状态绑定到视图上出现给用户，用户通过与视图交互扭转状态，之后扭转了的状态再绑定到视图会后出现给用户。
单向的数据流程很简略清晰，然而多个组件共享数据会毁坏这种简略的构造。

组件间通信形式的回顾

大多数状况下，组件都不是孤立存在的，他们须要独特合作形成一个简单的业务性能，在 Vue 中，为不同的组件关系提供了不同的通信规定。

常见的组件间通信的形式有：

父组件给子组件传值 (最简略的一种形式)

• 父组件中给子组件通过相应属性传值
• 子组件通过 props 承受数据

<!-- 子组件 -->
<template>
  <div>
    <h1>Props Down Child</h1>
    <h2>{{title}}</h2>
  </div>
</template>

<script>
export default {
  // 子组件中通过 props 来接管父组件传的值
  // props 能够是数组也能够是对象
  // 如果想约定传值的类型用对象，这里 title 定了是 string 类型，如果传 number 类型会报错
  // props: ['title'],
  props: {title: String}
}
</script>

<style>

</style>

<!-- 父组件 -->
<template>
  <div>
    <h1>Props Down Parent</h1>
    <!--2. 应用子组件的应用通过属性给子组件传值，这里也能够是表达式，绑定 data 中的成员 -->
    <child title="My journey with Vue"></child>
  </div>
</template>

<script>
import child from './01-Child'
export default {
 // 1. 注册子组件
  components: {child}
}
</script>

<style>

</style>

子组件给父组件传值

• 子组件通过自定义事件，用 $emit 触发的时候携带参数给父组件传值
• 父组件通过 $on 注册子组件外部触发的事件，并接管传递的数据，行内能够通过 $event 获取事件传递的参数 (事件处理函数中是不这么应用的)

<!-- 子组件 -->
<template>
  <div>
    <h1 :style="{fontSize: fontSize +'em'}">Props Down Child</h1>
    <button @click="handler"> 文字增大 </button>
  </div>
</template>

<script>
export default {
 // 通过 props 接管父组件传的默认字体大小
  props: {fontSize: Number},
  methods: {handler () {
    // 当点击按钮的时候，触发自定义事件 enlargeText 放大字体，让字体放大 0.1
    // this 是以后子组件对象，this.$emit 这个是由子组件触发的自定义事件，当注册事件的时候要给子组件注册该事件
      this.$emit('enlargeText', 0.1)
    }
  }
}
</script>

<style></style>

<!-- 父组件 -->
<template>
  <div>
  <!-- 父组件将 fontSize 进行绑定 -->
    <h1 :style="{fontSize: hFontSize +'em'}">Event Up Parent</h1>

    这里的文字不须要变动
    <!-- 应用子组件，通过 v -on 给子组件设置了自定义办法 enlargeText-->
    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <!-- 还有一种在行内获取值的形式，获取自定义事件传递数据的时候，间接通过 $event 获取，这个值是触发事件传递的 0.1-->
    <child :fontSize="hFontSize" v-on:enlargeText="hFontSize += $event"></child>
  </div>
</template>

<script>
import child from './02-Child'
export default {
  components: {child},
  data () {
    return {hFontSize: 1}
  },
  methods: {
  // 子组件把值传递给了父组件，父组件通过参数接管到了值，进行运算
    enlargeText (size) {this.hFontSize += size}
  }
}
</script>

<style></style>

不相干组件之间传值

• 也是应用自定义事件的形式，然而因为没有父子关系，所以不能通过子组件触发传值，所以这里须要应用 eventBus，即创立一个公共的Vue 实例，这个实例的作用是作为事件总线，或者事件核心。
• eventBus：创立一个 Vue 实例，这个实例并不是用来展现内容，所以没有传递任何的选项，咱们应用他的目标是应用 $emit 和$on，用来触发和注册事件。
• 触发事件组件：通过 $emit 触发事件，并传递参数
• 注册事件组件：通过 $on 注册事件，接管参数进行解决

// eventbus.js
import Vue from 'vue'
export default new Vue()

<!-- 组件一：触发事件 -->
<template>
  <div>
    <h1>Event Bus Sibling01</h1>
    <div class="number" @click="sub">-</div>
    <input type="text" style="width: 30px; text-align: center" :value="value">
    <div class="number" @click="add">+</div>
  </div>
</template>

<script>
// 这个组件要触发事件，将事件核心导入
import bus from './eventbus'

export default {
// props 参数 num
  props: {num: Number},
  // 因为 props 的值不能轻易改变，所以传递给 value
  created () {this.value = this.num},
  data () {
    return {value: -1}
  },
  methods: {
  // 减值操作，判断不能为 0
    sub () {if (this.value > 1) {
        this.value--
        // 触发 bus 的自定义事件 numchange，并把 value 当参数传递进来
        bus.$emit('numchange', this.value)
      }
    },
    // 加值操作，和减值相似
    add () {
      this.value++
      bus.$emit('numchange', this.value)
    }
  }
}
</script>

<style>
.number {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  text-align: center;
}
</style>

<!-- 组件二：定义 -->
<template>
  <div>
    <h1>Event Bus Sibling02</h1>

    <div>{{msg}}</div>
  </div>
</template>

<script>
// 因为要注册事件，所以将事件核心导入
import bus from './eventbus'
export default {data () {
    return {msg: ''}
  },
  created () {
    // 通过 bus 注册了 numchange 事件，事件处理函数中接管事件触发时候传递的参数，进行展现
    bus.$on('numchange', (value) => {this.msg = ` 您抉择了 ${value}件商品 `
    })
  }
}
</script>

<style>

</style>

<!--App.vue-->
<template>
  <div id="app">
    <h1> 不相干组件传值 </h1>
    <sibling0301 :num="num"></sibling0301>
    <sibling0302></sibling0302>
  </div>
</template>

<script>
import sibling0301 from './components/03-event-bus/03-Sibling-01'
import sibling0302 from './components/03-event-bus/03-Sibling-02'

export default {
  name: 'App',
  components: {
    sibling0301,
    sibling0302,
  },
  data () {
    return {num: 1}
  }
}
</script>

<style></style>

其余常见形式

• $root，$parent，$children，$ref，通过这几种属性获取根组件成员，实现组件之间的通信。但这些都是不被举荐的形式。只有当我的项目很小，或者在开发自定义组件的时候，才会应用到。如果是大型项目的话，还是举荐应用 Vuex 治理状态。

上面举例通过 $refs 获取子组件的状态，其余属性能够本人查看文档。

ref的两个作用

1. 在一般 HTML 标签上应用 ref，用$refs 获取到的是 DOM 对象
2. 在组件标签上应用 ref，用$refs 获取到的是组件实例

<!-- 子组件，一个简略的自定义组件，性能是可能获取焦点的自定义文本框。-->
<template>
  <div>
    <h1>ref Child</h1>
    <!-- 这个 input 标签上设置了 ref 属性 -->
    <input ref="input" type="text" v-model="value">
  </div>
</template>

<script>
export default {data () {
    return {value: ''}
  },
  methods: {focus () {
      // 通过 this.$refs.input 获取 input 的 DOM 对象，并调用其 focus 办法让文本框获取焦点
      this.$refs.input.focus()}
  }
}
</script>

<style></style>

<!-- 父组件，-->
<template>
  <div>
    <h1>ref Parent</h1>
    <!-- 在子组件的标签上设置了 ref-->
    <child ref="c"></child>
  </div>
</template>

<script>
import child from './04-Child'
export default {
  components: {child},
  mounted () {
    // 这里想要拿到子组件的话，必须要等组件渲染结束，所以这里在 mounted 函数下
    // 这里通过 this.$refs.c 就是子组件对象，拿到这个对象就能够拜访其属性和办法
    // 这里调用子组件办法让其外部获取焦点
    this.$refs.c.focus()
    // 通过 value 属性给文本框赋值
    this.$refs.c.value = 'hello input'
  }
}
</script>

<style>

</style>

还是一句话不倡议应用，如果滥用这种形式的话能够造成状态治理的凌乱。

繁难的状态治理计划

下面组件间通信形式的问题

如果多个组件之间须要共享状态，应用之前演示的形式尽管都能够实现，然而比拟麻烦，而且多个组件之间进行传值，很难跟踪到数据的变动。如果呈现问题的话，很难定位问题。当遇到多个组件须要共享状态的时候，典型的场景如购物车，咱们应用之前介绍的计划都不适合，可能会遇到以下的问题：

• 多个视图依赖同一状态，如果多层嵌套的组件依赖同一状态，应用父子组件传值能够实现，然而十分麻烦而且不易治理。
• 来自不同视图的行为须要变更同一状态，咱们能够通过父子组件的形式对状态进行批改，或者通过事件机制来扭转，或者同步状态的变动，以上这些形式十分的软弱，通常会导致产生无奈保护的代码。

集中式的状态治理计划

为了解决这些问题，咱们把不同组件的共享状态抽取进去，存储到一个全局对象中并且未来应用的时候保障其实响应式的。这个对象创立好之后外面有全局的状态和批改状态的办法，咱们的任何组件都能够获取和通过调用对象中的办法批改全局对象中的状态 (组件中不容许间接批改对象的 state 状态属性)。

把多个组件的状态放到一个集中的中央存储，并且能够检测到数据的更改，这里先不应用Vuex，咱们本人先进行一个简略的实现。

1. 创立一个全局的store.js

集中式的状态治理，所有的状态都在这里。这个模块中导出了一个对象，这对象就是状态仓库且全局惟一的对象，任何组件都能够导入这个模块应用

这外面有 state，还有actions，state 是用来存储状态，actions是用户交互更改视图用的。还有一个 debug 的属性，不便开发调试。

// store.js
export default {
  debug: true,
  state: {
    user: {
      name: 'xiaomao',
      age: 18,
      sex: '男'
    }
  },
  setUserNameAction (name) {if (this.debug) {console.log('setUserNameAction triggered：', name)
    }
    this.state.user.name = name
  }
}

1. 在组件中导入

<!-- 组件 A -->
<template>
  <div>
    <h1>componentA</h1>
    <!--3. 能够在视图中间接用点的形式显示数据 -->
    user name: {{sharedState.user.name}}
    <button @click="change">Change Info</button>
  </div>
</template>

<script>
// 1. 在组件中导入 store
import store from './store'
export default {
  methods: {
    // 4. 当点击按钮的时候，调用 store 的办法，将值改为 componentA
    change () {store.setUserNameAction('componentA')
    }
  },
  data () {
    return {
      // 以后组件还能够有本人的公有状态，存在 privateState 中
      privateState: {},
      // 2. 将 store 的 state 属性赋值给 shareState
      sharedState: store.state
    }
  }
}
</script>

<style></style>

<!-- 组件 B，用法与下面一样，就是批改名字的时候值为 componentB-->
<template>
  <div>
    <h1>componentB</h1>
    user name: {{sharedState.user.name}}
    <button @click="change">Change Info</button>
  </div>
</template>

<script>
import store from './store'
export default {
  methods: {change () {
      // 批改名字的时候改成了 componentB
      store.setUserNameAction('componentB')
    }
  },
  data () {
    return {privateState: {},
      sharedState: store.state
    }
  }
}
</script>

<style></style>

下面组件 A 和组件 B 都共享了全局的状态，并且用户都能够更改状态。调试的时候，按 A 组件的按钮两者都变成了 componentA，点B 组件的按钮两者都变成了componentB。

咱们不在组件中间接批改状态的值而是通过调用 store 的actions来批改值，这样记录的益处是：可能记录 store 中所以 state 的变更，当能够实现记录 store 的state的变更时候，就能够实现高级的调试性能。例如：timeTravel(时光旅行)和历史回滚性能。

方才应用的 store，其实就相似于Vuex 的仓库。

当我的项目比较复杂，多个组件共享状态的时候，应用组件间通信的形式比拟麻烦，而且须要保护。这个时候咱们能够应用集中式的状态解决方案 —— Vuex

Vuex

好的终于进入了主题~~

什么是 Vuex?

• Vuex 官网
• Vuex 是专门为 Vue.js 设计的状态治理库，从应用的角度其实就是一个 JavaScript 库
• 它采纳集中式的形式存储须要共享的数据，如果状态特地多的话不易治理，所以 Vuex 还提供了一种模块的机制，依照模块治理不同的状态
• 它的作用是进行状态治理，解决简单组件通信，数据共享
• Vuex 也集成到 Vue 的官网调试工具 devtools extension，提供了 time-travel 时光旅行、历史回滚、状态快照、导入导出等高级调试性能

什么状况下应用 Vuex?

非必要的状况不要应用 Vuex

Vuex 能够帮忙咱们治理组件间共享的状态，然而在我的项目中应用 Vuex 的话，咱们须要理解 Vuex 中带来的新的概念和一些 API，如果我的项目不大，并且组件间共享状态不多的状况下，这个时候应用Vuex 给咱们带来的好处并没有付出的工夫多。此时应用简略的 store 模式 或者其余形式就能满足咱们的需要。

中大型单页应用程序应用更好

中大型单页应用程序中，应用 Vuex 能够帮咱们解决 多个视图依赖同一状态 、 来自不同视图的行为须要变更同一状态 的问题。倡议合乎这些状况的业务，应用 Vuex 进行状态治理，会给咱们提供更好的解决组件的状态，带来的收益会更好些。例如典型案例：购物车。

留神：不要滥用Vuex，否则会让业务变得更简单。

Vuex 外围概念回顾

上面这张图展现了 Vuex 的外围概念并且展现了 Vuex 的整个工作流程

• Store：仓库，Store是应用 Vuex 应用程序的外围，每个利用仅有一个 Store，它是一个容器，蕴含着利用中的大部分状态，当然咱们不能间接扭转Store 中的状态，咱们要通过提交 Mutations 的形式扭转状态。
• State：状态，保留在 Store 中，因为 Store 是惟一的，所以 State 也是惟一的，称为繁多状态树，这里的状态是响应式的。
• Getter：相当于 Vuex 中的计算属性，不便从一个属性派生出其余的值，它外部能够对计算的后果进行缓存，只有当依赖的状态产生扭转的时候，才会从新计算。
• Mutation：状态的变动必须要通过提交 Mutation 来实现。
• Actions：与 Mutation 相似，不同的是能够进行异步的操作，外部扭转状态的时候都须要扭转Mutation。
• Module：模块，因为应用的繁多状态树让所有的状态都会集中到一个比拟大的对象中，利用变得很简单的时候，Store对象就会变得相当臃肿，为了解决这些问题 Vuex 容许咱们将 Store 宰割成模块，每个模块领有本人的State，Mutation，Actions，Getter，甚至是嵌套的子模块。

Vuex 根本构造

应用 vue-cli 创立我的项目的时候，如果抉择了 Vuex，会主动生成Vuex 的根本构造。

// store.js
import Vue from 'vue'
// 导入 Vuex 插件
import Vuex from 'vuex'
// 通过 use 办法注册插件
// 插件外部把 Vuex 的 Store 注入到了 Vue 的实例上
Vue.use(Vuex)
// 创立了 Vuex 的 Store 对象并且导出
export default new Vuex.Store({
    state: {...},
    mutations: {...},
    actions: {...},
    modules: {...}
    // 如果有须要还能够有 getters
})

//App.js
// 导入 store 对象
import store from './store'
new Vue({
    router,
    // 在初始化 Vue 的时候传入 store 选项，这个选项会被注入到 Vue 实例中
    // 咱们在组件中应用的 this.$store 就是在这个中央注入的
    store,
    render: h => h(App)
}).$mount('#app')

State 的应用

1. 下载我的项目模板 vuex-sample-temp，npm install下载依赖，在 store/index.js 中定义两个state

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'hello vue'
  },
  mutations: { },
  actions: { },
  modules: {}})

1. 在 App.vue 中应用 state，而后应用npm run serve 查看后果

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    count: {{$store.state.count}} <br/>
    msg: {{$store.state.ms}}
  </div>
</template>
<script>

1. 每次应用变量都要后面写 $store.state 很是麻烦，所以这里应用 `Vuex 外部提供的myState` 的函数，会帮咱们生成状态对应的计算属性

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <!--4. 在应用的时候间接用计算属性 count 和 msg 即可 -->
    count: {{count}} <br/>
    msg: {{msg}}
  </div>
</template>
<script>
  // 1. 引入 vuex 的 mapState 模块
  import {mapState} from 'vuex'
  export default {
    // 2. 在计算属性中调用 mapState 函数
    computed: {
      // 3. mapState 须要接管数组作为参数，数组的元素是须要映射的状态属性
      // 会返回一个对象，蕴含两个对应属性计算的办法
      // {count: state => state.count, msg: state => state.msg}
      // 而后这里应用扩大运算符开展对象，实现之后咱们就有了 count 和 msg 两个计算属性
      ...mapState(['count', 'msg'])
    }
  }
</script>

1. 下面的办法比拟简洁然而如果这个组件中自身就有 count 或者 msg 属性，就会造成名称抵触，这个时候须要设置别名。

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <!-- 应用的时候间接应用别名即可 -->
    count: {{num}} <br/>
    msg: {{message}}
  </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    // mapState 能够传对象，键是别名，值是映射的状态属性
    ...mapState({num: 'count', message: 'msg'})
  }
}
</script>

Getter 的应用

Vuex中的 getter 就相当于组件中的计算属性，如果想要对 state 的数据进行简略的解决在展现，能够应用getter

这里用 Vuex 的getter解决而不是用组件中的计算属性是因为状态自身属于Vuex，应该在其外部解决

1. 在 store.js 中设置getters

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'hello vue'
  },
  // 与计算属性的写法统一
  getters: {reverseMsg (state) {return state.msg.split('').reverse().join('')
    }
  },
  mutations: { },
  actions: { },
  modules: {}})

1. 在 App.vue 中应用

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <h2>reverseMsg: {{$store.getters.reverseMsg}}</h2>
    <br/>
  </div>
</template>

1. 同样那样援用过于麻烦，那么和 mapState 一样，应用外部的 mapGetters，也是将其映射到组件的计算属性，其用法和mapState 一样，也能够为了防止抵触应用对象设置别名。

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <h2>reverseMsg: {{reverseMsg}}</h2>
    <br/>
  </div>
</template>
<script>
// 1. 引入 vuex 的 mapGetters 模块
import {mapGetters} from 'vuex'
export default {
  // 2. 在计算属性中调用 mapGetters 函数
  computed: {
    // 3. 用法与 mapState 统一，这里也能够应用对象设置别名
    ...mapGetters(['reverseMsg'])
  }
}
</script>

Mutation 的应用

状态的批改必须提交 Mutation，Mutation 必须是同步执行的。

1. 当用户点击按钮的时候，count值进行减少，先在 store.js 中写 Mutation 函数

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'hello vue'
  },
  mutations: {
    // 减少函数，接管两个参数
    // 第一个 state 状态
    // 第二个是 payload 载荷，payload 是 mutations 的时候提交的额定参数，能够是对象，这里传递的是数字
    increate (state, payload) {state.count += payload}
  },
  actions: { },
  modules: {}})

1. 在 App.vue 中设置按钮，并注册事件

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    count: {{$store.state.count}} <br/>
    <h2>Mutation</h2>
    <!-- 给按钮注册点击事件，点击的时候调用 commit 提交 Mutation，第一个参数是调用的办法名，第二个参数是 payload，传递的数据 -->
    <button @click="$store.commit('increate', 2)">Mutation</button>
  </div>
</template>

1. 点击按钮的时候，count的值每次+2
2. 上面进行写法优化，应用 map 办法将以后的 mutation 映射到 methods 中，其依旧会返回一个对象，这个对象中存储的是 mutation 中映射的办法

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    count: {{$store.state.count}} <br/>
    <h2>Mutation</h2>
    <!-- 这里间接写办法，，第一个参数 state 不须要传递，前面传 payload 参数为 3 -->
    <button @click="increate(3)">Mutation</button>
  </div>
</template>
<script>
// 1. 引入 vuex 的 mapMutations 模块
import {mapMutations} from 'vuex'
export default {
  // 2. methods 中调用 mapMutations 办法
  methods: {...mapMutations(['increate'])
  }
}
</script>

Mutation 的调试

运行到 4 之后，这时看一下 devtools 看一下时光旅行和历史回滚，上面是初始状态

点一下按钮之后就减少了一个记录，还显示了扭转之后的数据

如果数据不对，能够进行调试。

时光旅行

而后多点几下，进行时光旅行。

点击按钮之后，状态就变成了之前那个状态，这个性能也是为了不便调试

状态回滚

这个图标就是状态回滚

点击之后，代码就回到了没有执行这一步的状态

提交扭转

上面那个按钮的意思是将这次提交作为最初一次提交

点击之后，base State变成了那次的状态，其余的状态以这个作为起始点

Actions 的应用

如果有异步的批改，须要应用 actions，在actions 中能够执行异步操作，当异步操作完结后，如果须要更改状态，还须要提交Mutation。

1. 在 actions 中增加办法increateAsync

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'hello vue'
  },
  mutations: {increate (state, payload) {state.count += payload}
  },
  actions: {
    // actions 中的办法有两个参数：第一个参数是 context 上下文，这个对象中有 state，commit，getters 等成员，第二个参数是 payLoad
    increateAsync (context, payLoad) {setTimeout(() => {context.commit('increate', payLoad)
      }, 2000)
    }
  },
  modules: {}})

1. 在 App.vue 中应用 dispatch，actions 的办法都要用这个

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    count: {{$store.state.count}} <br/>
    <h2>Actions</h2>
    <!-- 这里应用了 dispatch-->
    <button @click="$store.dispatch('increateAsync',5)">Action</button>
  </div>
</template>

1. 进行优化，这个时候引入mapActions

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    count: {{$store.state.count}} <br/>
    <h2>Actions</h2>
    <button @click="increateAsync(5)">Action</button>
  </div>
</template>
<script>
// 1. 引入 vuex 的 mapActions 模块
import {mapActions} from 'vuex'
export default {
  methods: {
    // 这个是对 Actions 的办法的映射，把 this.increateAsync 映射到 this.$store.dispatch
    ...mapActions(['increateAsync'])
  }
}
</script>

Modules 的应用

模块能够让咱们把繁多状态树拆分成多个模块，每个模块都能够领有本人的 state，mutation，action，getter 甚至嵌套子模块。

模块定义

在 store 文件夹中，创立一个 modules 文件夹，外面每一个 js 文件就是一个模块，上面是每一个模块的定义格局

const state = {
  products: [{ id: 1, title: 'iPhone 11', price: 8000},
    {id: 2, title: 'iPhone 12', price: 10000}
  ]
}
const getters = {}
const mutations = {setProducts (state, payload) {state.products = payload}
}
const actions = {}

export default {
  namespaced: false,
  state,
  getters,
  mutations,
  actions
}

模块注册

1. 先导入这个模块

import products from './modules/products'
import cart from './modules/cart'

1. 起初在 modules 选项中注册，注册之后这里会把模块挂载到 store 的state中，这里能够通过 store.state.products 拜访到 products 模块中的成员，还把的模块中的 mutation 成员记录到了 store 的外部属性 _mutation 中，能够通过 commit 间接提交mutation。

export default new Vuex.Store({state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    products,
    cart
  }
})

模块应用

1. 在 App.vue 中应用，state就点进去，mutation还是用 commit 办法

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <h2>Modules</h2>
    <!-- 第一个 products 是 products 模块，第二个 products 是模块的 state 的 products 属性 -->
    products: {{$store.state.products.products}} <br/>
    <button @click="store.commit('setProducts',[])">Mutation</button>
  </div>
</template>

增加命名空间

因为每个模块中的 mutation 是能够重名的，所以举荐应用命名空间的用法，方便管理。

1. 在开启命名空间的时候，在模块的导出局部增加namespaced

const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  // true 就是开启，false 或者不写就是敞开
  namespaced: false,
  state,
  getters,
  mutations,
  actions
}

1. 应用的时候在 App.vue 中要设置 state 是模块中进去的，如果没有命名空间，就是全局的 state 的。

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    products: {{products}} <br/>
    <button @click="setProducts([])">Mutation</button>
  </div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
export default {
  computed: {
    // 模块中的 state，第一个参数写模块名称，第二个参数写数组或者对象
    ...mapState('products', ['products'])
  },
  methods: {
    // 模块中的 mutations，第一个写模块名称，第二个写数组或者对象
    ...mapMutations('products', ['setProducts'])
  }
}
</script>

Vuex 严格模式

所有的状态变更必须提交 mutation，然而如果在组件中获取到$store.state.msg 进行批改，语法层面没有问题，却毁坏了 Vuex 的约定，且 devTools 也无奈跟踪到状态的批改，开启严格模式之后，如果在组件中间接批改state，会报错。

1. 在 index.js，初始化Store 的时候开启严格模式

export default new Vuex.Store({
  strict: true,
  state: {...},
  ...
}

1. 在 App.vue 中应用间接赋值的语句

<template>
  <div id="app">
    <h1>Vuex - Demo</h1>
    <h2>strict</h2>
    <button @click="$store.state.msg ='hello world~'">strict</button>
  </div>
</template>

1. 点击按钮内容扭转，然而控制台会抛出谬误

留神：不要在生产环境开启严格模式，因为严格模式会深度检测状态树，会影响性能。在开发模式中开启严格模式，在生产环境中敞开严格模式

export default new Vuex.Store({
 strict: process.env.NODE_ENV !== 'production',
 state: {...}

Vuex 插件

• Vuex插件就是一个函数，接管一个 store 的参数
• 在这个函数中能够注册函数让其在所有的 mutations 完结之后再执行

插件的应用

• 插件应该在创立 Store 之前去创立

• subscribe函数

  • 作用是去订阅 store 中的mutation
  • 他的回调函数会在每个 mutation 之后调用
  • subscribe会接管两个参数，第一个是mutation，还能够辨别模块的命名空间，第二个参数是state，外面是存储的状态

1. 定义插件

// 这个函数接管 store 参数
const myPlugin = store => {
    // 当 store 初始化后调用
    store.subscribe((mutation, state) => {
        // 每次 mutation 之后调用
        // mutation 的格局为 {type, payload}
        // type 外面的格局是 "模块名 /state 属性"
        // state 的格局为 {模块一, 模块二}
    })
}

1. 在 Store 中注册插件

const store = new Vuex.Store({
    //...
    plugins: [myPlugin]
})