vuex的使用

vuex

1、概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

即用来保存需要管理的状态值，值一旦被修改，所有引用该值得地方会自动更新。

应用场景：

• 多个视图依赖于同一状态
• 来自不同视图的行为需要变更同一状态

此时，将共享状态抽取出来，以一个全局单例模式管理

适用于中大型单页应用（j简单应用时，可以用store模式解决）

2、使用

每一个Vuex应用的核心就是store（仓库）。“store”相当于一个容器，它包含着应用中大部分状态（state）.
Vuex和单纯的全局对象有以下两点不同：
1、Vuex的状态存储是响应式的，当Vue组件从store中读取状态时，若store中的状态发生变化，那么响应的组件也会响应地得到高效更新；
2、不能直接改变store中的状态，改变store中的状态的唯一途径就是提交mutation。

安装

npm install vuex --save

目录
在src目录下新建一个目录store，该目录下新建一个index.js，用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.store实例保存到变量store中，最后使用export default导出store:

import Vue from 'Vue';//引入vue
import Vuex from 'Vuex';//引入vuex

Vue.use(Vuex);//使用vuex

//创建vuex实例
const store=new Vuex.Store({
})

//导出store
export default store

引入
在main.js文件中引入该文件，在文件里面添加import store from ‘./store’;，再在vue实例全局引入store对象；

几种基本状态
State

import Vue from 'Vue';//引入vue
import Vuex from 'Vuex';//引入vuex

Vue.use(Vuex);//使用vuex

//创建vuex实例
const store=new Vuex.Store({
	state:{
		count:1;
	}
})

//导出store
export default store

调用
在页面通过this.$store.state调用state中的值。

Getters
Getters相当于vue中的computed计算属性，getter的返回值会根据它的依赖被缓存存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters可以用于监听state中的值得变化，返回计算后的结果。

import Vue from 'Vue';//引入vue
import Vuex from 'Vuex';//引入vuex

Vue.use(Vuex);//使用vuex

//创建vuex实例
const store=new Vuex.Store({
	state:{
		count:1;
	},
	getters:{
		getStateCount:function(state){
			return state.count+1;
		}
	}
})

//导出store
export default store

调用
this.$store.getters.getStateCount

Mutations
修改状态，同步，类似于组件中的定义事件。

import Vue from 'Vue';//引入vue
import Vuex from 'Vuex';//引入vuex

Vue.use(Vuex);//使用vuex

//创建vuex实例
const store=new Vuex.Store({
	state:{
		count:1;
	},
	getters:{
		getStateCount:function(state){
			return state.count+1;
		}
	},
	mutations:{
		add(state){
			state.count=state.count+1;
		},
		reduction(state){
			state.count=state.count+1;
		}
	}
})

//导出store
export default store

Actions
在actions中提交mutation函数，异步操作

import Vue from 'Vue';//引入vue
import Vuex from 'Vuex';//引入vuex

Vue.use(Vuex);//使用vuex

//创建vuex实例
const store=new Vuex.Store({
	state:{
		count:1;
	},
	getters:{
		getStateCount:function(state){
			return state.count+1;
		}
	},
	mutations:{
		add(state){
			state.count=state.count+1;
		},
		reduction(state){
			state.count=state.count+1;
		}
	},
	actions:{
		addFun(context){
			context.commit("add");
		},
		reductionFun(context){
			context.commit("reduction")
		}
	}
})

//导出store
export default store

调用
this.$store.dispatch(“addFun”)

mapState、mapGetters、mapActions
简化写法
在页面中引入

import {mapState,mapActions,mapGetters} from 'vuex';

computed中

computed:{
	mapState({
		count1:state=>state.count
	})
},

之后在页面中可以直接调用count1。