vuex是什么

vuex是类似于redux的状态管理器，用来管理vue的所有组件状态

为什么要使用vuex

当我们开发一个大型的 SPA(单页应用) 时,会出现多个组件依赖于相同的数据，来自不同视图的行为需要变更同一数据。官方解释里习惯把数据说成状态，为了更便于理解，这里就叫数据了

遇到以上情况就要使用 vuex 了，它能把组件的共享数据抽离出来，统一由 vuex 当做全局单例模式进行管理

vuex工作原理图

看一下绿色虚线里的内容，vuex 是由三个组成部分的，Actions、Mutations、State（本质是三个配置对象）

当vue组件需要变更数据时，如果没有一些业务逻辑和需求，可以直接调用commit方法由mutations处理数据，如果有业务逻辑或者一些ajax请求，那么就需要调用dispatch方法由actions进行处理，再由actions处理数据。

简单总结一下各部分的功能

actions用于响应组件中的动作
mutations用于操作数据
state用于存储数据

这三个对象都由store进行管理

搭建vuex环境

第一步安装vuex，在当前脚手架目录下使用命令npm i vuex

第二步使用vuex插件 Vue.use(vuex)

第三步在脚手架的src下建立一个store文件夹里面建立一个index.js文件，用于配置有关操作

第四步将store绑定在vm上，以便所有组件都能访问到

getters配置项

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义getter（可以认为是 store 的计算属性）。

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: (state) => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

mapState函数

computed: {
    count () {
        return this.$store.state.count
    }
}

这样通过count计算属性获取同名state.count属性，是不是显得太重复了，我们可以使用mapState函数简化这个过程。

import { mapState } from 'vuex'; //记得引入

export default {
    computed: mapState ({
        count: state => state.count,
        countAlias: 'count',    // 别名 `count` 等价于 state => state.count
    })
}

mapActions和mapMutations函数

用法大致和mapState一致

vuex----vue的状态管理模式