Vuex基本用法

1.1、Vuex官方定义

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

1.2 Vuex核心

Vuex像一个仓库，公共的状态会抽离出来放进里面。Vuex核心包含以下几个部分

• state
• mutation
• getters
• actions
• modules
  1）、state 存放 状态
  2）、mutations 存放如何更改状态
  3）、getters 就是从state中派生出来的状态，比如将state中的某个状态进行过滤后获取新的状态。
  4）、actions就是mutation的加强版，它可以通过commit mutations中的方法改变状态，更重要的是可以进行异步操作。
  5）、让代码结构更加清晰，可以把模块分为几块，把状态和管理规则分类

2、Vuex基本用法

2.1 NPM安装

npm install --save -dev

2.2 用法

它的用法与vue-router类似，在main.js 里，通过使用Vue.use() 使用Vuex：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		count: 0,
		list: [1, 5, 8, 10, 30, 50]
	},
	getters: {
		filteredList: state => {
			return state.list.filter(item => item < 10);
		},
		listCount: (state,getters) => {
			return getters.filteredList.length;
		}
	},
	mutations: {
		increment (state, param) {
			state.count += param.count;
		},
		decrease (state) {
			state.count --;
		}
	},
	actions: {
		increment (context) {
			context.commit('increment')
		},
		asyncIncrement (context) {
			return new Promise(resolve => {
				setTimeout(() => {
					context.commit('increment');
					resolve();
				},1000)
			})
		}
	}
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  Vuex,
  components: { App },
  template: '<App/>'
})

const store = new Vuex.Store({
	state: {
		count: 0
	}
})

在任何组件都可以通过 $store.state.count 获取

<template>
	<div>
		{{ count }}
	</div>
</template>
<script>
export default {
 computed: {
  	count() {
  		 return this.$store.state.count;
  	},  	
  },
}

访问页面可计数0可显示
template中

	<button @click="handleIncrement">+1</button>
	<button @click="handleDecrease">-1</button>

methods: {
	handleIncrement () {
  		// this.$store.commit('increment',5); //加5
  		this.$store.commit({
  			type: 'increment',
  			count: 10
  		})
  	},
  	handleDecrease () {
  		this.$store.commit('decrease');
  	}
}

在main.js中的
mutations 还可以接受第二个参数，可以是数字、字符串或对象类型。比如每次增加的不是1，而是指定的数量，可以这样改写

mutations: {
	increment (state, n = 1){
		state.count += n;
	}
}

3、高级用法

3.1 只想得到小于10的数据

在main.js中

const store = new Vuex.Store({
	state: {
		list: [1, 5, 8, 10, 30,50]
	},
	getters: {
		filteredList: state => {
			return state.list.filter(item => item < 10 )
		},
		listCount: (state,getters) => {
			return getters.filteredList.length;
		}
	}
})

index.vue 中

<template>
	<div>
		{{ list }}
		{{ listCount }}
	</div>
</template>
<script>
	export default {
		computed: {
			list () {
				return this.$store.getters.filteredList;
			},
			listCount () {
				return this.$store.getters.listCount
			
			}
		}
	}
</script>

3.2 action

action在组件内通过 $store.dispatch 触发，使用action来加1；
在main.js 中

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment (state,n = 1){
			state.count += n
		}
	},
	actions: {
		asyncIncrement (context) {
			return new Promise(resolve => {
				setTimeout(() => {
					context.commit('increment');
					resolve();
				},1000)
			})
		}
	}
})

在index.vue

<template>
	<div>
		{{ count }}
		<button @click="handleAsyncincrement">action +1</button>
	</div>
</template>
<script>
	export default {
		computed: {
			count () {
				return this.$store.state.count;
			}
		},
		methods: {
			hanleActionIncrement () {
				this.$store.dispatch('asyncIncrement').then(() => {
	  			console.log(this.$store.state.count)
	  		})
			}
		}
	}
</script>