三分钟学会Vuex

Vuex 是什么？

• vuex是一个专门为vue提供的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

vuex有五大核心

首先简单说明，然后在下面详细介绍使用方法

核心方法	简单说明
state	Vue使用单一状态树的方式，将各组件的数据都储存在state中。（所以每个应用将仅仅包含一个 store 实例）
getter	Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations	更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
actions	1、Action 提交的是 mutation，而不是直接变更状态。2 、Action 可以包含任意异步操作。
module	可以对vuex进行分类处理，解决了vuex使用单一状态数导致所有状态都集中在一个对象下，造成的store臃肿问题

---------------------------------------------这是分割线-------------------------------------------------

• state

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  		name:'zhangsan', //这样就在store中存入了name为zhangsan ，age为25的两条数据
  		age:'25'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

之后在页面中使用store中的数据

<template>
	<div id=""app">
			//在页面中直接使用的方法
			<span>名字：{{ $store.state.name }}</span>
			//官方推荐的使用方法，
			/* 由于 Vuex 的状态存储是响应式的，从 store 
			实例中读取状态最简单的方法就是在计算属性返回某个状态：*/
			<span>年龄：{{ age }}</span>
	</div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  computed: {	
    	age () {
      		return this.$store.state.age
      		//每当 store.state.age变化的时候,都会重新求取计算属性,并且触发更新相关联的 DOM。
    	}
  }
};
</script>

当store中存储过多的数据或者深层测的数据时，每次都要在store中层层寻找会显得麻烦,为此，vuex为我们提供了辅助函数 mapState

// 以数组的方式映射数据，
computed: mapState([
  // 映射this.$store.state.name 为this.name 
  'name'，
  'age'
])
//如果要和外部的计算属性共用时，
//通常，我们需要使用一个工具函数将多个对象合并为一个，
//以使我们可以将最终对象传给 computed 属性。
//但是自从有了对象展开运算符，我们可以极大地简化写法：
computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

• getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

  getters: {
  	//getter 接受 state 作为其第一个参数：
    doneTodos(state)=> {
      return state.age++
    }
  }

//页面中使用 getters
<p>{{changeDate1}}</p>
	<script>
	// 像state 一样，getters也有辅助函数mapGetters
	import { mapGetters } from 'vuex'
	export default {
	    computed: {
	        ...mapGetters([
	            'changeDate1'
	        ])
	    },
	</script>

• mutaitions

vuex 定义唯一修改数据的方式是通过提交mutations
vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
mutaions只可以用来进行同步操作

  mutations: {
  	//方法定义了两个参数，第一个是state中的数据，第二个val是调用方法后传递回来的值
    increment (state,val) {
      // 变更状态
      state.count += val
    }
  }

//在页面中不能直接提交mutations中的方法，需要通过$store.commit("increment", 10 )
//这种方法被称为载荷

辅助函数mapMutations 的使用方法、

<script>
	import { mapMutations } from 'vuex'
	export default {
		methods:{
			//mutations中定义的是方法，所以在methods中调用辅助函数后,将mutations中的方法，用数组的形式传递过来，就可以在methos中直接使用this找到
	        ...mapMutations([
	            'changeTel',
	        ]),
	        exitUser() {
            	this.changeTel({tel: 110, age: 18})
        	},
	    }
	</script>

• actions

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

//做一个简单的栗子
//存放数据
export default new Vuex.Store({
  //存放数据
  state: {
    obj: {}, 
  },
  //4.通过commit mutations中的方法来处理
  mutations: {
    getParam (state,Object) {
	   //5.修改state中的数据
       state.obj= Object
    }
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('getParam',Object)
        },3000)
    }
  }
})

然后我们就在组件里这么调用就可以了

 methods: {
   getVal() {
	  let name= 'xia';
	  let age= '26';
	  let sex= 'man';
	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
	  this.$store.dispatch('getParamSync',{name,age,sex})
   }
 }

• Modules
  随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

import moduleA from './module/moduleA' // 模块A
import moduleB from './module/moduleB' // 模块B

Vue.use(Vuex)

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    modules: {
        moduleA,
        moduleB
    }
})

modduleA/ moduleB 中的数据

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

组件中调用

<template>
	<div class="demo">
		<h1>{{getText1}}</h1>
		<h1>{{getText2}}</h1>
	</div>
</template>

computed: {
    getText1(){
    	return this.$store.state.moduleA.text;
    },
    //或
	...mapState({
		getText2: state => state.moduleB.text;
	})
}

另外vuex中定义插件的方法 plugin

//以固化插件作为栗子
	
	// 第一种安装方式
	yarn add vuex-persistedstate --save
	// 第二种安装方式
	npm i vuex-persistedstate --save
	cnpm i vuex-persistedstate --save
	
	安装之后在store中进行导入
	import createPersisted from 'vuex-persistedstate'

	//在plugins中开启createPersisted数据持久化模式
	plugins: [
           createPersisted()
    ]

以上便是vuex基础的使用方法
总结：
在进行大型项目或者单页面多组件开发时，vuex提供了一种简单的数据存储工具，方便了开发过程中对数据的操作
参考地址： Vue.js