Vuex 是什么？

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

什么是"状态管理模式"？

一个简单Vue计数器应用

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

这是一种“单向数据流”的理念。
然后说明一下这种理念的缺点，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

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

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

这里说的是，vue 组件之间的传值操作，组件不多的情况下，嵌套的父子组件（prop，emit，on）和兄弟组件（global event bus）还容易操作一些。但是如果项目庞大，组件结构复杂，组件间的数据传递会变得很困难，后期代码不易维护。

看到这里，貌似明白了些这鬼东西是要解决什么问题了。好的，然后我们继续往“坑”里走。

最简单的store

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

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：

store.commit('increment'); // 触发修改变量的方法
console.log(store.state.count); // -> 1

WTF？这是啥，这不就是“全局变量”嘛！多个组件可能用到的数据，存储到 store（仓库）里，但是这些数据是响应式的，所以对这些数据进行操作时，要遵守相应的规则。例如上面的例子。对 count 进行修改，要通过 commit 来触发 mutation 里的方法对数据进行操作。

好了，喝口我的枸杞大补茶压压惊 [ 微笑 ]。从这里再往坑里走，才是 Vuex 的一些核心概念，他们是：

State
Getter
Mutation
Action
Module

让我们开始吧。

State

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

这段话说的是一个 Vuex 只能包含一个store（存储数据的库），这样你在访问数据的时候好找些。
store 的其中一个配置项就是 state 。这个state吧，可以把他比作成vue实例中的data选项，就是把数据放在这里面。

const state = {
  // 商品列表
  shopList：[{
    id: 1,
    name: '兰博基尼',
    price: 10
  },{
    id: 2,
    name: '五菱宏光',
    price: 99999
  }],
  // 购物车列表
  addList: []
};

new Vuex.Store({
  state, // 这里是es6语法，相当于  state: state
  ...
});

获取商品列表 this.$store.state.shopList 就能看到了，或者使用辅助函数mapState，这样虽然方便简单，建议新手先研究一下 es6 和方法原理，这里不做解释。

computed: mapState([
  // 映射 this.shopList为 store.state.shopList
  'shopList'
])

Vuex 文档中有很多 es6 语法，如果有还不了解的同学们，可要抓紧上车喽。

Getter

我一度怀疑是不是文档写错了，少加了一个s。（Getters）
这一项从字面意思上就可以看出，他是用来取数据，得到数据的。有人会问，为什么不直接用this.$store.state.shopList这种方式直接拿呢。这种方式确实可以拿到，但是经常会有一些情况是对拿到的数据做一些处理，例如格式化、过滤数据。。。这时候就会用到 Getter 了。

const getters = {
    // 获取id为2的商品
    shopid2(state){
        return state.shopList.find((el)=>{
            return el.id == 2;    
        });
    }
};

使用this.$store.getters.shopid2得到五菱宏光，即可加入秋名山车神争霸，走上人生巅峰。
辅助函数 mapGetters 方法：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'shopid2'
      // ...
    ])
  }
}

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

你需要以相应的 type 调用 store.commit 方法：this.$store.commit('increment')

你想要动我的数据，就得守我 Vuex 的规矩（顺我者昌，逆我者亡）。
拿数据用 Getters ，改数据用 mutation 。这个 mutation 有点像 vue 的生命周期钩子函数，里面是一些方法，通过 this.$store.commit（typeName） 对应的函数名称，触发对应的函数。

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10);


// 在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

辅助函数 mapMutations 方法：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

在 Vuex 中，mutation 都是同步事务：

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

为了处理异步操作，让我们继续往下走。

Action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

也就是说，Action 执行的还是 Mutation ，只不过他可以异步执行，差不多就是给 Mutation 外边包了一层函数。

Action 异步操作 Mutation

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment'); // 在异步函数成功后调用 Mutation
    }, 1000)
  }
}

通过 this.$store.dispatch('incrementAsync')即可调用。
辅助函数 mapActions 方法

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Module 的意思也不难理解，如果你有很多的状态，都写在一起会比较乱，后边也不好改，你就可以给他们分个类，比如 moduleA 是我的购物车模块的状态管理，moduleB 是我的商品信息模块的状态管理。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

什么时候用 Vuex？

这个嘛，很简单。你觉得你的项目里，各组件之间传参什么的，相处的很和谐，那就无所谓用不用了。
当你的组件兄弟们有传参问题，有很多这个组件要用，那个组件要，其他好几个组件也要，要的你生不如死，你就可以考虑一下了。

总结

最后，我们再回顾一下 Vuex 都包含什么，是做什么用的。

store
俗称仓库，仓库里是你的模块的数据、数据状态、对数据做的操作，都在这个仓库里。

state
仓库里的数据都放到这个里面，很像 vue 的 data 。

getters
通常获取可以用 this.$store.state.shopList 就可以拿到，但是如果你想对这项数据加工一下（格式化、过滤），就在 getters 里处理，然后通过 this.$store.getters.eventName 获取。

mutation
修改数据操作，你想对某项数据进行修改，就得守规矩。不能用 this.$store.state.count=99，要把修改函数写在 mutation 里面，用 this.commit('eventName') 触发修改函数。注意，这里的操作必须是同步。

action
异步触发 mutation 。

module
给多个状态模块分类。

posted @ 2019-09-04 13:51 maxlove 阅读(844) 评论(0) 编辑收藏举报

刷新页面返回顶部