vue-music (9) vuex 的初始化及应用注意事项

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

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

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

用vuex管理数据，可以在多个组件中动态的共享统一数据
在src目录下建立store目录，里面应该有
1. state： 用于储存数据、状态的仓库
2. action ： 用于对mutations的数据进行函数操作
调用方法：在methods 中 …mapActions([]) // 中括号
3. mutations: 将数据提交到state，吧action中的操作提交给state
调用方法： 在methods 中 …mapMutations({ }) // 大括号
4. getter: 将state的数据传到dom中进行渲染
调用方法：在computed中 …mapGetters([]) // 中括号
5. muatation-type： 对mutations相关字符串常量
6. index：入口文件 用于配置vuex

actions：

import * as types from './mutation-types'

export const deleteSearchHistory = function ({commit}, query) {
  commit(types.SET_SEARCHHISTORY, deleteSearch(query))
}

actions 和 mutation调用方法类似，都是先以方法的形式引入，然后在methods中调用，将数据写到actions或者mutations中，最终提交到store储存

这样，调用setSinger（）方法，将数据singer 写到store中

getter调用

这样，组件dom可以直接使用singer数据