vuex到底是什么?什么情况下使用?
一、vuex是什么?
vuex是vue的状态管理器,是介于客户端与服务端之间的一个桥梁。
自己大致的画了个草图辅助理解
在vuex中有五个对象属性:state、mutations、actions、getters、moduls。
总结一下图里的内容:
客户端要请求数据 ==>> 对接actions,在actions中进行axios请求 ==>> 请求过来的数据给mutations进行数据存储 ==>> 数据存在state中 ==>> getters将state中的数据进行返回 ==>> 客户端对接getters接收数据。
官方给的图是:
大致的过程也是如此;
除了以上的state、mutations、actions、getters,还有一个modules,在modules里有四个完整的state、mutations、actions、getters,
modules里可以包含有很多的模块,不同的模块都有自己的state、mutations、actions、getters,最后形成一个js文件在modules中引入即可。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import {state,mutations,getters} from "./mutations";
import actions from "./actions";
//引入menu.js
import menu from "./modules/menuManage";
export default new Vuex.Store({
state,
mutations,
actions,
getters,
modules:{
menu,//在这引入menu
}
});
二、什么情况下使用vuex?
对于初学者来说,也许会有这样的困惑:数据的请求在组件中也能完成请求,为什么还有到vuex中进行?到底在什么情况下使用vuex?vuex中为什么不直接对数据进行操作还要绕一圈再给数据赋值?
第一个问题:数据的请求在组件中也能完成请求,为什么还有到vuex中进行?
实际上,在组件的mounted钩子函数中就能进行数据的请求,父子组件之间,非父子组件之间进行传值也有一些方法,小型的项目也许这么做没事没问题,但是如果是进行大型项目,非父子之间传值,父子之间传值会出现混乱复杂的酱紫(就像重庆的高速),如果使用vuex不止能把数据放在全局,组件无论在哪都能反问获取到,并且线路清晰,有利于维护。
在vuex中有个存储的地方,在state;这个state在vue全局都能访问到,只要进行程序调度就能获取。vuex是从组件中提取的共享状态,并在全局单例中进行管理,任何组件都可以访问状态或触发动作,无论组件在任意位置。
第二个问题:到底在什么情况下使用vuex?
其实第一个问题就已经回答了,小项目用不用vuex都行,大型项目建议使用vuex。
第三个问题:vuex中为什么不直接对数据进行操作还要绕一圈再给数据赋值?
需要注意,所有 store 中 state 的变更,都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。我们提交突变而不是直接进行更改的原因是因为我们要明确跟踪它。
们提交突变而不是直接进行更改的原因是因为我们要明确跟踪它。