Vuex状态管理器初步学习

Vuex总体概述

1. Vuex 是一个专为 Vue 开发的状态管理插件库。每一个 Vuex 应用的核心就是 store（仓库）。store中包含着应用中大部分的状态 ( state )。

2. 实现任意组件间通信，任意组件都可以读取到store中的state对象中的数据

3. vue 组件，通过dispatch方法触发actions中的事件，在action事件中再通过commit方法触发mutations中的方法，然后 Mutations 中的方法就去改变State 中的数据，当state中的数据发生变化后，就会重新渲染到组件中去。这样就完成了一整个流程。

   在整个流程中，改 变 store 中 的 状 态 的 唯 一 途 径 就 是 通过dispatch触发mutation中的方法。

4. Vuex 的状态存储是响应式的。若 store 中的状态发生变化，那么相应的组件也会更新。

5. store主要包括以下几个模块：

   1). State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

   2). Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

   3). Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

   4). Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

   5). Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中

1、Vuex的安装与使用

1.0 Vuex有什么作用，有什么特点

• Vuex的作用
  1、Vuex主要用于公共状态管理，解决多个非父子组件传值问题，多个页面都能用Vuex中store公共的数据。
  2、Vuex只是单页面数据的保存，不可能持久保存数据，当用户刷新浏览器的时候那么数据就有会消失。
• Vuex的特点
  1、遵循单向数据流
  2、Vuex中的数据是响应式的

1.1 安装

npm install vuex --save

1.2 新建仓库
新建Vuex/store.js 目录与文件（一般Vuex放在与src同级的目录位置）
store.js定义仓库如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
var store = new Vuex.Store({
 	state,:{},     //使用vuex中的数据
	mutations:{},   //使用vuex中的方法
	getters:{},   //  对state中的数据进行初步加工，返回的是加工过的数据
    actions:{}       //对vuex中的方法进行了加工，形成新的方法
})
export default store 

1.3 引入仓库，挂载到实例上
在main.js中，引入并挂载到根实例上

import store from './store/store.js'     //全局中引入vuex

new Vue({
  el: '#app',
  store,                 // 挂载到根实例上
  template: '',
  components: { App }
})

1.4 在任何Vue组件中，获取仓库内容

this.$store    // 可获取整个store对象

2、Vuex详解

2.1、state详解

存储在 Vuex 中的数据，
通过组件中computed属性获取state中的某个状态值赋给新变量，每当状态值变化的时候，vue就会重新计算，其新变量也会相应变化。

2.2、getter详解

调用getter中的方法，返回对state中的原始数据进行加工筛选后的数据

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

调用方法：

• 可以直接调用，
• 可通过computed方法，与state获取方法一样，
• 也有mapGetters 辅助函数方法

2.3、Mutation与Action

二者都是改变状态的方式，

• 同步逻辑封装在mutation中，
• 异步逻辑封装在action中。

参考链接 https://vuex.vuejs.org/zh/guide/state.html

3、vuex的优缺点

• vuex的优点

  1.解决了非父子组件的消息传递（将数据存放在state中）

  2.把一些常用的异步请求的数据放入state中，减少了AJAX请求次数

• vuex的缺点

  1.刷新浏览器，vuex中的state会重新变为初始状态

  解决方法：使用sessionStorage来保存更新数据

  解决方案vuex-along ,vuex-persistedstate
  

4、为什么 Vuex 的 mutation 和 Redux 的 reducer 中 不能做异步操作？

mutation 必须是同步函数。

因为mutation主要的作用就是去修改状态，追踪状态的变化，每个 mutation 执行完成后都会对应到一个新的状态变更。

而如果mutation是异步的话，它就无法追踪状态什么时候去改变。因为异步请求什么时候返回，这点无法确定。

参考链接：https://github.com/robinvdvleuten/vuex-persistedstate