vuex详解

现在我用的最多最熟练的就是vuex了 ， 当然我还是很菜 ， 我现在整理了一些vuex的概念，包括数据持久化，高级语法

1. 先说vuex的基本概念组成

   Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
   vuex的组成
   
   上图看出，vuex分为5部分
   1）state
   state是存储的单一状态，是存储的基本数据。

2）Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）感觉像是异步的muations

5）Module
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。.

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 的状态

2 高级语法，辅助函数
Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store

    mapState(namespace, map) 　　　　　　 ;用于获取state
    mapGetters(namespace, map) 　　　　　 ;用于获取getters
    mapMutations(namespace, map) 　　　　 ;用于获取mutations
    mapActions(namespace, map)     　　　　 ;用于获取actions

每个函数的两个参数意义每

namespace　　　 ;命名空间，也就是模块名

map　　　　　　　;要获取的信息

1、mapState:把state属性映射到computed身上

computed:{
         ...Vuex.mapState({
            input:state=>state.inputVal,
            n:state=>state.n
        })   
    }

state：用来存储公共的状态 在state中的数据都是响应式的。

响应式原因：state里面有一个getters、setters方法；data中的数据也是响应式的，因为里面也有getters和setters方法

在computed属性中来接收state中的数据,接收方式有2种（数组和对象，推荐对象）.

优点：

本身key值是别名，要的是val的值，key的值a 和 val="a"一样就行，随意写。减少state里面长的属性名。
可以在函数内部查看state中的数据，数组方式的话，必须按照state中的属性名。

  computed:Vuex.mapState({
    key:state=>state.属性
  })
如果自身组件也需要使用computed的话，通过解构赋值去解构出来

  computed:{
    ...Vuex.mapState({
       key:state=>state.属性
    })
  }

2、mapAcions：把actions里面的方法映射到methods中

methods:{
        ...Vuex.mapActions({
            add:"handleTodoAdd",    //val为actions里面的方法名称
            change:"handleInput"     
        })
    }

add、change为action方法别名，直接代用add和change方法就行，不过要记得在actions里面做完数据业务逻辑的操作。

等价于如下的函数调用，

methods: {
handleInput(e){           
let val = e.target.value;
this.$store.dispatch("handleInput",val )
},	handleAdd(){
this.$store.dispatch("handleTodoAdd")
}
}

actions里面的函数主要用来处理异步的函数以及一些业务逻辑,每一个函数里面都有一个形参，这个形参是一个对象，里面有一个commit方法，这个方法用来触发mutations里面的方法

3、mapMutations：把mutations里面的方法映射到methods中
只是做简单的数据修改（例如n++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。

methods:{
        ...Vuex.mapMutations({
            handleAdd:"handlMutationseAdd"})
    }

mutations里面的函数主要用来修改state中的数据。mutations里面的所有方法都会有2个参数，一个是store中的state，另外一个是需要传递的参数。

理解state、actions、mutations，可以参考MVC框架。

state看成一个数据库，只是它是响应式的，刷新页面数据就会改变；
actions看成controller层，做数据的业务逻辑；
mutations看成model层，做数据的增删改查操作。

4、mapGetters:把getters属性映射到computed身上

 computed:{
        ...Vuex.mapGetters({
            NumN:"NumN"})
    }

getters类似于组件里面computed，同时也监听属性的变化，当state中的属性发生改变的时候就会触发getters里面的方法。getters里面的每一个方法中都会有一个参数 state。

3 数据持久化
vuex-persist的基本使用：
　1、安装

			**npm install vuex-persist -D**

2、基本使用

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

const vuexLocal = new VuexPersist({
  storage: window.localStorage //可选，sessionStorage/indexDB
});

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  plugins: [vuexLocal.plugin]
});

export default store