Vuex--vue状态管理

Vuex核心是store，store基本就是一个容器包含大部分的状态（state）。

Vuex与单纯的全局对象有以下两点不同：

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

2、不能直接更改store中的状态。改变store中状态的唯一途径就是显式的commit mutation。

Vue组件中获取Vuex状态：

1、在计算属性内返回 前提是Vuex通过Vue的插件系统将store实例从根组件中“注入”到所有子组件里，且子组件能过通过this.$store访问到。

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

2、使用mapState辅助函数

一个组件需要获取多个状态时，为防止重复将状态声明为计算属性，可使用mapState简化。

如果映射的计算属性名称与state的子节点名称相同，可简化为给mapState传一个字符串数组["count"]

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

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

3、与局部计算属性混用：使用对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

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)
    }
  }
})

//getter会暴露为 store.getters对象，通过属性的形式访问
store.getters.doneTodos

//如果getter返回一个函数，也可以通过方法去访问getter
getters: {
    getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
//通过方法访问--每次都会去进行调用而不会缓存
store.getters.getTodoById(2)

//mapGetters辅助函数--将store中的getter映射到局部计算属性中去
import { mapGetters } from 'vuex'

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

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation--唯一能够更改Vuex中state的办法及时提交mutation

mutation必须是同步函数。

每个mutation都有一个字符串的事件类型type和一个回调函数callback。这个回调函数就是进行状态更改的地方，接收state作为第一个参数

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

// 调用
store.commit('increment')

//额外传参成为提交载荷 commit palyload

store.commit('increment', 10)

//大多数情况下，载荷是一个对象
store.commit('increment', {
  amount: 10
})

// 对象式提交载荷
store.commit({
  type: 'increment',
  amount: 10
})

Action --处理异步操作

Action通过提交mutation来更改state而不是直接变更状态；action可以包含任意的异步操作。

Action 通过 store.dispatch 方法触发。

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

Module--大型应用分割store为各个模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。