vuex的知识点总结

Vuex介绍：

参考官网：https://vuex.vuejs.org/zh/guide/

vuex是一种状态管理模式，集中管理所有组件的（共享）状态

Vuex的核心是store（仓库），store是一个容器，包含应用中大部分的状态。

与全局对象的不同之处在于：

1、vuex的状态存储是响应式的，store中的状态发生变化，相应的组件也会立即更新；

2、不能直接改变store中的状态，改变的唯一途径是显示的提交（commit）mutation

核心概念

包括state， getter， mutations， actions

State

如何获取vuex状态：

由于Vuex的状态是响应式的，使用计算属性返回某个状态

store选项存在的原因：

因为store提供了将状态从根组件“注入”到每个子组件中（需调用 Vue.use(Vuex)），不需要某个组件频繁导入，如下图1

通过在根实例注册 store 选项，该store实例会注入到根组件下的所有子组
件，子组件能通过 this.$store访问到 ，如下图2

mapState辅助函数

展开运算符：http://www.seozhijia.net/vue/186.html

当一个组件需要获取多个状态时，可以使用mapState辅助函数帮助生成计算属性
参考：https://vuex.vuejs.org/zh/guide/state.html

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练,当计算属性和state的子节点名称不相同可以使用下面的
    count1: state => state.count,
    
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当计算属性的名称与state的子节点名称相同时，直接给mapstate传一个字符串数组

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

Getter

特性：

多个组件共享一个函数时，可以用store的计算属性getters
mapGetter辅助函数可以映射到局部计算属性

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

1、getter的返回值会根据他的依赖缓存起来，且只有当他的依赖值发生了改变才会被重新计算
2、Getter接受state作为其第一个参数
3、Getter可以以属性的形式访问getter里的值store.getters.dongTodos

Mutations

• mutation是更改vuex的store中的状态的唯一方法，类似与事件，调用时用

store.commit('increment')

• mutation不能直接调用，只能由action触发
• mutation必须是同步函数，如果混合异步时，回调函数中进行的状态改变不可追踪，程序难以调试
• 一般用常量替代mutation事件

Actions

• action提交mutation,而不是直接变更状态
• action可以包含任意的异步操作，异步包括（定时器函数，Promise）
• 组件中如何分发action：
  1、mapActions 辅助函数映射
  2、this.$store.dispatch(‘XXX’)

疑问

1、actions与mutations有啥不一样？为什么这样设计？

• 只有mutations可以更改状态state，actions不能直接更改状态，它只是提交mutations
• mutation必须是同步函数，如果混合异步时，回调函数中进行的状态改变不可追踪，程序难以调试
• action可以包含任意的异步操作，异步包括（定时器函数，Promise）