学习vuex

一、Vuex是什么？

Vuex是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex的基本思想，就是单向数据流，一起来看一下Vuex实现单向数据流的示意图。

二、Vuex状态管理和传统全局变量的不同之处

1、Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

三、Vuex的概念

五个核心：

state： 存储数据的地方

actions： 异步操作

mutations: 同步操作，只有mutations可以修改state中的数据

getters： 相当于 state的计算属性。

moduleas模块化 modeA, modeB，modeC

四、Vuex使用步骤

1、安装Vuex
npm install vuex --save

**2、创建 store.js，引用vuex，创建仓库store。 **

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//数据
const state={
    count:10
}
//action  执行异步操作，不可以修改state数据
const actions={
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',Object)
        },3000)
    }
}
//mutation 可直接修改state数据
const mutations={
    increment(state,value){
        state.count += value;
    },
    decrement(state,value){
        state.count -=value;
    }
}
//getter 
const getters = {
    newCount:state => state.count * 3
}
 
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

3、在 main.js中注册到根组件中

import store from './store/store.js'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

五、Vuex语法糖

• 当一个组件需要多个状态时，这些状态都声明成计算属性过于冗长。于是有了辅助函数。
• 语法糖。四大金刚辅助函数：mapState、mapActions、mapMutations、mapGetters

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
computed:{
    ...mapState({
        a:"a",   //  "a" 指的是state中的a
        b:"b"
    }),
    ...mapGetters({
        Val:'newVal' // 可以重新命名
    })
}
methods:{
    ...mapActions({
        getSync:'getSyncNum'
    })
    ...mapMutations({
        increament:"increament"
    })
}
<template>
{{a}}  {{b}}
{{getSync(1)}}
<button @click='increament(1)'></button>
</template>

六、modules模块化管理

应用场景：

• 状态树结构复杂时
• 多人协同开发时

//创建store，分模块定义
const  test1 ={
   namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"})
   state:{name:'test1'},
   actions:{},
   mutations:{
   changeName(state,arg){
           state.name=arg;
       },
   getters:{}
}

const test2 = {
   namespaced:true,
   state:{},
   actions:{},
   mutations:{}
   },
   getters:{}
}
new Vuex.Store({
   state:{name:"root"},
   actions,
   mutations,
   getters 
   modules:{
       test1,
       test2
   }
})

在组件中使用：

{{this.$store.state.name}}
{{name}}
{{this.$store.state.test1.name}}
{{tes1Name}}

computed:{
   ...mapState({
       name:“name"
   }),
   ...mapState('test',{   
       test1Name:'name'
   })
}
methods:{
   ...mapMutations('test1',['changeName'])
}

七、Vuex数据持久化

刷新页面，数据丢失、清空。有时候我们需要把一些数据固定到本地，即使刷新也不能清空，
使用场景：

• 登陆状态
• token
  1、安装
  npm install vuex-persistedstate --save
  2、在Vuex初始化的时候

import createPersistedState from 'vuex-persistedstate'

const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins:[createPersistedState({
        storage: window.sessionStorage
    })] //会自动保存创建的状态。刷新还在
}
})

createPersistedState()可配置的参数:

• key：storage名称，所有的数据会存储到一个key里面，默认：vuex
• storage：数据存储位置，默认：localStorage。也可以设置sessionStorage。如上。

也可以使用 js-cookie 将状态保存在cookie，如下
首先安装js-cookie
cnpm install js-cookie --save

  
  import * as Cookies from 'js-cookie'
  import createPersistedState from 'vuex-persistedstate'

  const store = new Vuex.Store({
  // ...
  plugins: [
      createPersistedState({
                storage: {
      getItem: key => Cookies.get(key),
      setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
      removeItem: key => Cookies.remove(key)
    }

      })
  ]
  })

1、需要安装 js-cookie
2、getItem 加载保存的状态
3、setItem 保存状态
4、removeItem 删除保存的状态

默认持久化所有state，要想持久化指定state，配置如下：

const store = new Vuex.Store({
  ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
　　　 reducer(state) {
          return {
            // 只储存state中的list 和test1模块
            list: state.list,
            test1:state.test1
          }
      }
  })]
})