vue笔记 (十五) Vuex基本使用与辅助函数

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

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

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

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

核心概念（五种基本对象）：

• State：存储状态（变量）
• Getters：对数据获取之前的再次编译，可以理解为state的计算属性
• Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似
• Action：Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作。
• Modules：store的子模块，开发大型项目，方便状态管理而使用的

用脚手架搭建vue项目，然后在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，用来创建vuex实例，同时定义state

在main.js里面引入并注册

接下来就可以使用vuex了

State

刚才我们已经在store中定义了state，state可以理解为vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据

Getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getters用法：

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，Vuex 中的 mutation 非常类似于事件。通常情况下Vuex要求我们mutation中的方法必须是同步方法，如果是异步的话虽然页面会修改成功，devtolls追踪不到，如下面例子：

我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。

在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它

然后在helloworld组件中定义方法

这时点击页面加减就实现了想要的效果。

上面是通过字符串的方式提交mutation，this.$store.commit('decrement', n)。

mutation还有另外一种提交风格，以对象的方式提交：

vuex的数据响应：

Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，但是前提是我们必须遵守一些Vuex对应的规则：首先数据必须是提前在store中初始化好的数据，像下面例子中想要往state中的info对象里添加新属性adress，这个adress提前是没有在state中初始化的，所以直接添加就不是响应式的。

给state中的对象添加新属性，有两种方式可以做到响应式

• 方式一：使用Vue.set方法

Vue.set方法就可以使新添加的数据变成响应式的：

• 方式二:用新对象给旧对象重新赋值

mutations: {
  change (state) {
    state.info = {...state.info, 'adress': 'ShangHai'}
  }
}

同理，删除属性要用Vue.delate

mutations: {
  change (state) {
    Vue.delete(state.info,'age')
  }
}

Action

Action 类似于 mutation，主要是用来代替mutation实现异步操作的，Action 提交的是 mutation，而不是直接变更状态

Modules

Vue 使用单一状态树，意味着很多状态都会交给 Vuex 来管理，当应用变得非常复杂时，store 对象就有可能变得相当臃肿，为了解决这个问题，Vuex 允许我们将 store 分割成模块（Module）， 每个模块拥有自己的 state、mutations、actions、getters 等。

划分方式：

modules中的mutations：

modules中的getters:

modules中的actions：

vuex中的辅助函数

vuex官方给我们提供了一系列辅助函数来简化我们的代码，也就是 {mapState, mapMutations, mapActions, mapGetters}。

注：

• mapState，mapGetters返回的是属性，所以混入到 computed 中
• mapMutations，mapActions返回的是方法，只能混入到methods中

mapState

mapGetters

mapMutations和mapActions

mapMutations和mapActions用法与上面两个辅助函数类似，只不过要混入到methods中来使用。

mapMutations：

methods: {
  // 将this.add映射成 this.$store.commit('add')
  ...mapMutations(['add']),
  methodA () {.....}
}

mapAction:

methods: {
  // 将this.add映射成 this.$store.dispatch('add')
  ...mapActions(['add']),
  methodB () {.....}
}