之前接触过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;
参考文献: