Vue中的Vuex

 

一，vuex介绍

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

官方文档：点击进入

vuex是什么(总结)：

1. Vuex是一个基于vue应用的全局状态管理器；
2. 可以将应用中不同组件的状态抽取并统一管理；
3. 它可以在vue中全局使用；
4. 在构建大型应用时，可方便的在组件外部管理状态/数据；
5. 它需要遵守一定的规则，如下三点：

• 在state中存放数据；
• 在action中定义方法；
• 在mutations中改变状态；

二，vuex计数器案例

如果使用单向数据流开发一个计数器功能非常简单，只需在组件中定义数据、事件即可；

但是，如果这个计数器的数据在N多组件中都需要访问，那么组件之间就要进行复杂的数据传递，后期维护会很麻烦；

所以这里使用vuex将组件间共同的数据和方法抽取，并统一管理；

这样在不同的组件中就可以使用vuex方便的操作了；

创建一个项目：vue create projectname

建好项目后，在Home.vue和store.js中修改代码，如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
		<div>
			<button @click="subCount()"> - </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<span>{{count}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button @click="addCount()"> + </button>
		</div>
		
  </div>
</template>

<script>
export default {
	
	computed:{
		count(){
			return this.$store.state.count;
		}
	},
	
	
	methods:{
		addCount(){
			this.$store.dispatch('addCount')
		},
		subCount(){
			this.$store.dispatch('subCount')
		}
	}
}

</script>

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
		count:5
  },
  mutations: {
	addCount(state){
		state.count++;
	},
	subCount(state){
		state.count--;
	}
  },
  actions: {
		addCount(context){
			console.log(context);
			if(context.state.count<10){
				context.commit('addCount');
			}
		},
		subCount(context){
			if(context.state.count>0){
				context.commit('subCount');
			}
		}
  }
})

三，vuex的getter

使用vuex时，我们在获取数据时还想做些额外的逻辑处理，可以使用到vuex中的getter；

getter顾名思义就是提供get方法，也可以理解成vue中的计算属性(computed)

使用getter可以针对vuex中state的状态（数据）进行逻辑处理并返回；

getter可以直接返回数据，也可以返回方法；

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png"><br />
    vuex中的数组：<span>{{this.$store.state.arr}}</span><br />
    vuex中的数组的长度：<span>{{arrLength}}</span><br />
    count加数组长度：<span>{{countAddArrLength}}</span><br />
    输出index：<input type="text" v-model="index"/><br />
    获取指定索引的数据：<span>{{getValueByIndex(index)}}</span>
  </div>
</template>

<script>

export default {
	data(){
		return {
			index : 0
		}
	},
	computed : {
		arrLength(){
			return this.$store.getters.arrLength;
		},
		countAddArrLength(){
			return this.$store.getters.countAddArrLength
		},
		getValueByIndex(){
			return function(index){
				return this.$store.getters.getValueByIndex(index);
			}
		}
	}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
		arr : [0,11, 22, 33, 44, 55, 66],
		count : 10
  },
  getters : {
  	arrLength(state){
  		return state.arr.length;
  	},
  	countAddArrLength(state, getters){
  		return state.count + getters.arrLength;
  	},
  	getValueByIndex(state){
  		return function(index){
  			if(index >= 0 && index < state.arr.length){
  				return state.arr[index];
  			}
  		}
  	}
  },
  mutations: {

  },
  actions: {

  }
})