Vuex相关的

什么是vuex：

1. 首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题

2. 将我们在多个组件中需要共享的数据放到start中，

3. 要获取或格式化数据需要使用getters，

4. 改变start中的数据，可以使用mutation，但是只能包含同步的操作，在具体组件里面调用的方式this.$store.commit('xxxx')

5. Action也是改变store中的数据，不过是提交的mutation，并且可以包含异步操作，在组件中的调用方式this.$store.dispatch('xxx')； 在actions里面使用的commit('调用mutation')

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex工作流程：

1. 组件内可以通过dispatch触发Actions, Actions里面经常处理异步数据,

2. 数据返回后可以通过Commit 来触发Mutations, 每次触发都可以通过Devtools观测到它的类型和传参,

3. Mutations一般用来修改state里面的值, state里面的值变化了, 所有组件内的vuex的数据都变化了

4. 如果没有异步请求的话可以直接在组件里面通过 Commit 触发 Mutations 修改state里面的值

vuex中有几个核心属性，分别是什么？

一共有5个核心属性，分别是:

• state 唯一数据源,Vue 实例中的 data 遵循相同的规则

• mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发

• action Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作

• module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})


store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

• getters 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.

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

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

vuex的getter的作用：

getter 有点类似 Vue.js 的计算属性，当我们需要从 store 的 state 中派生出一些状态，那么我们就需要使用 getter，getter 会接收 state 作为第 一个参数，而且 getter 的返回值会根据它的依赖被缓存起来，只有 getter 中的依赖值（state 中的某个需要派生状态的值）发生改变的时候才会被重新计算。

mutation 里面可以放异步吗？

非严格模式确实是可以放异步，代码也可以正常执行！严格模式下不能这样操作（写异步），会有警告。

不建议放异步代码，目的是为了形成数据快照（拿到当时的那个数据状态）便于溯源，为了配合 DevTools 调试。

vuex中的数据在页面刷新后数据消失

用sessionstorage 或者 localstorage 存储数据

存储： sessionStorage.setItem( '名', JSON.stringify(值) )
使用： sessionStorage.getItem('名') ---得到的值为字符串类型，用JSON.parse()去引号；