vuex总结(话术)

1. 什么是vuex ?

Vuex 是一个专为Vuex.js应用程序开发的状态管理模式，他由五部分组成：
分别是：state，actions，mutations，modulse

2. 五部分组成
   • state ：数据
   • actions：可以包含异步操作
   • mutations：唯一可以改变state场所
   • getters：计算属性getter的反回值会根据它的依赖值被缓存起来
   • modules：每个模块拥有只记得state，mutation，active，getter，甚至是嵌套子模块—从上至下进行同样的方式分割
3. 如何使用

   import vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(vuex);
   
   const state=()=>{token:''}
   const actions={
   	set_token({commit},val){
   		commit("token",val)
   	}
   }
   const mutations={
   	to_ken(state,val){
   		state.token=val;
   	}
   }
   const getters={}
   let store=new Vuex.store({
   	state,
   	actions,
   	mutations,
   	getters,
   })
   module.export=store
   

   	<template>
   	 	<div>
   			{{$store.state.token}}
   	 	</div>
   	</template>
   	<script>
   		created(){
   			//掉用actions中的方法
   			this.$store.dispath('set_token',1234);
   			//调用mutations中的方法
   			this.$store.commit('to_ken',1234)
   		}
   	</script>
   

4. 高级用法—数据持久化
   他是结合Storage来实现状态持久化

   • 安装
     npm install vuex-persistedstate -S

     -S是–save的简写，意为：把插件安装到dependencies(生产环境依赖)
     -D 是–save-dev的简写，意为：把插件安装到devdependencies(开发环境依赖)

   • 在store中使用

     	import createPersistedState from 'vuex-persistedstate'
     		const state = {
     		user:{},
     	}
     	export default new Vuex.Store({
     	state,
     	getters,
     	actions,
     	mutations,
     
      plugins: [createPersistedState()]
     	//会自动保存创建的状态,刷新还在。默认保存在localStorage中，	key值默认为vuex
     	plugins:[createPersistedState({
     		Storage:window.sessionStorage,
     		key:'data'
     	})]
     	//保存在sessionStorage中，key值为data
     });
     

5. 高级用法—辅助函数(语法糖)
   1. 语法糖，辅助函数：mapstate,mapActions,mapMutations,mapGetters
   2. 当一个组件需要多个状态时这些状态，这些状态都声明成计算属性过于冗长，于是就有了辅助函数

   	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>