Vuex对比Redux学习Vuex

之前接触过react框架中通过redux处理数据流。来到新公司，接触到新框架Vue，在项目中不可避免得需要对数据状态进行管理。

简单一提Redux

简单来说，redux的流程;

view—>action–>store–>reducer（返回）–>store–>view

因为单一的数据流将整个state存储在唯一的store中,store的只读性，需要通过页面的改变触发action,action去间接的修改state。之后通过reducer执行修改，并通过创建一个新的状态返回新的修改的状态。并展示在页面中

Vuex

Vuex流程：

vueComponent(组件) -> actions -> mutations -> state -> vueComponent(组件)
vueComponent(组件) -> getters -> state

• state：存放多个组件共享的状态（数据）
• mutations：存放更改state里状态的方法，用于变更状态，是唯一一个更改状态的属性
• getters：将state中某个状态进行过滤，然后获取新的状态，类似于vue中的computed
• actions：用于调用事件动作，并传递给mutation
• modules：主要用来拆分state

两者相比

其实大部分概念都差不多，只不过VUEX简化了一些流程。
store、state基本一样，只是action与mutation有些差别。
redux中数据是从action–>reducer–>更新state；
VUEX则是action（特定情况可以省略）–>mutation–>更新state。

举个例子

希望在下面页面中，获取到点击的数据

渲染在下面的页面中

可以利用Vuex实现
上代码吧～
1.创建store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let store = new Vuex.Store({
	// 1. state
	state:{
		city:"城市名"
	},

	// 2. getters
	getters:{
		// 参数列表state指的是state数据
		getCityFn(state){
			return state.city;
		}
	},
	// 3. actions
	// 通常跟api接口打交道
	actions:{
		// 设置城市信息
		// 参数列表：{commit, state}
		// state指的是state数据
		// commit调用mutations的方法 
		// name就是调用此方法时要传的参数
		setCityName({commit,state}, name){
			// 跟后台打交道
			// 调用mutaions里面的方法
			commit("setCity", name);
		}
	},
	// 4. mutations
	mutations:{
		// state指的是state的数据
		// name传递过来的数据
		setCity(state, name){
			state.city = name;
		}
	}
});

export default store;

而在想要取到值的页面中添加methods方法

methods:{
  	backFn : function(index){
  		// 调用vuex的ations设置城市的值
  		this.$store.dispatch("setCityName", this.cityArr[index]);
  		//返回到首页
  		this.$router.push("/");
  	}
  }

在渲染的地方：

	// 通过vuex的getters方法来获取state里面的数据
     this.$store.getters.getCityFn;

参考文献：

1. Vuex起步
2. vuex最简单、最详细的入门文档