关于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的两个作用

在一般HTML标签上应用ref，用$refs获取到的是DOM对象

在组件标签上应用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，咱们本人先进行一个简略的实现。

创立一个全局的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
  }
}

在组件中导入

<!--组件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的应用

下载我的项目模板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: {
  }
})

在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>

每次应用变量都要后面写 $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>

下面的办法比拟简洁然而如果这个组件中自身就有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，应该在其外部解决

在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: {
  }
})

在App.vue中应用

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

同样那样援用过于麻烦，那么和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必须是同步执行的。

当用户点击按钮的时候，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: {
  }
})

在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>

点击按钮的时候，count的值每次+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。

在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: {
  }
})

在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>

进行优化，这个时候引入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
}

模块注册

先导入这个模块

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

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

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

模块应用

在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是能够重名的，所以举荐应用命名空间的用法，方便管理。

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

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

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

应用的时候在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，会报错。

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

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

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

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

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

留神：不要在生产环境开启严格模式，因为严格模式会深度检测状态树，会影响性能。在开发模式中开启严格模式，在生产环境中敞开严格模式
export default new Vuex.Store({
 strict: process.env.NODE_ENV !== 'production',
 state: {
  ...
}

Vuex插件

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

插件的应用

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

定义插件

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

在Store中注册插件

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