Vuex是什么

如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新

学习Vuex, 一定要看懂官网的这张图

image.png

我们从Vue Components开始简单过一遍这个图

1. 在Vue Components中, 我们执行dispatch操作调用Actions中定义的方法
2. Actions中的方法执行commit操作调用Mutations的方法
3. Mutations可以直接操作State里面的值
4. State中保存我们的状态值, State中的值一旦发生变化,就会重新渲染(Render)和它关联的Vue Components, 走到这里正好走了一个圈

除此之外, 图中我们还有两个地方没有提到, 那就是Backend API和Devtools

• 先说下Backend API
  翻译成中文就是后台Api, 难道我们要在这里对接后台的接口, 是的, 就是这个意思, 在Actions和Backend API中间是一条虚线, 官方的意思并不强制要求我们去这么做, 但是建议我们在Actions中去调用我们封装好的后台接口请求文件, 这样的好处就是在Vue页面中我们不用再去写任何api请求的代码了, 把注意力全放到和Vuex的交互上来
• Devtools
  Vue官方为我们提供的Vuex状态调试工具, 它能跟踪到Vuex的每一个操作和状态改变

最后一个知识点, Mutations可以省略吗?
可以省略, 省略我们直接使用Actions操作State, 但是不建议,我们在图中也看到了, 在Mutations的地方对接了Devtools，如果去掉了Mutations我们就无法使用Devtools的调试了, 另外还有就是如果我们的状态值变的很多的时候, Actions和Mutations可以分层调用的作用, 类似Java或Php中的Service层和Model层, Mutations层的代码可能会被Actions重复调用, 起到代码复用的效果

好了, 今天就先大概介绍这么多

上篇文章我们介绍了Vuex是什么, 本文我们主要介绍Vuex中的State

什么是State?

State就是Vuex保存数据的地方

让State中的状态和Vue Components中的属性关联

1. 在store定义一个状态count默认为0
const store = new Vuex.Store({
  state: {
    count : 0
  }
})

2. 使组件中的count和状态count关联上
// 方式1
// 组件的值和状态值绑定, 状态值改变, 组件中定义的值也跟着改变
export default {
  data() {
    return {
      count: this.$store.state.count
    }
  }
}

// 方式2. 通过辅助函数关联, 效果和方式1一致
import { mapState } from 'vuex'
data(){
   // 这里无需写count: 0
},
computed: {
    ...mapState(['count']),
}

注: 使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态

Vuex中的Getter是干什么的?

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数, 这个时候我们就需要用到Getter了

在Getter中定义方法对列表进行过滤

• getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    // 只返回done为true的列表
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // 返回一个函数
   getTodoById: (state) => (id) => {
     return state.todos.find(todo => todo.id === id)
   }
  }
})

获取Getter中的数据

• 通过属性获取

this.$store.getters.doneTodos;

• 通过方法

this.$store.getters.getTodoById(1);

辅助函数

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