优雅的使用Vuex

什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这是官方的解释，我们是在使用中利用其特性，可以使我们自己在不同组件之间数据共享

1、安装

• 法一：在Vue之后引入vuex会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

• 法二：NPM安装

npm install vuex --save

2、引入vuex

import Vue from 'vue'
import Vue from 'vuex'
Vue.vue(Vuex) 

3、vuex核心

实例化state，mutations，getter，action，module
导出store
使用时需要将store引入

const store = new Vuex.Store({
	state,
	mutations,
	getters,
	actions,
})

export  default store

• 3.1、state
  state在vuex中用于存放数据类似于组件中的data；

let state = {
count: 1
}

• 3.2、mutations
  里面放的是方法，用于改变state中的数据（改变了原数据）

let mutations = {
 // mutations中的方法
	inCount() { 
		state.count++;
	}
}

在具体事例中使用commit()触发方法

methods:{
	inCount(){
		this.$store.commit('inCount')   // 此处inCount是指mutations中的方法
	}
}

mutations——state

• 3.3、action

类似于mutations，提交的是mutations，而不是直接变更状态
可以包含异步操作

context.commit(),用来提交mutations方法。

let actions = {
	inCount(context){
		context.commit('inCount')  // inCount是mutations中的方法
	}
}

外部通过dispatch触发actions中的方法。this.$store.dispatch('')
dispatch——actions——mutations——state

• 3.4、getters
  类似于vue的computed，改变state里面的数据时会触发getters中的方法，起监听作用。

let getters = {
	computedCount: (state) => {
		return store.count*2;
	}
}

state与getters同步

实现持久化

将请求的数据缓存到vuex中，这样下次请求就可以在vuex中读取，不用再次读取api