关于Vuex的几个疑问

看了vuex的一些文档,大多数说的比较官方,说实话,看的云里雾里的。
这里向熟悉vuex的大神提几个问题,希望大神们用通俗易懂的话告诉我它的真理。

  1. 什么是状态管理?

  2. 经常看到vuex文件夹下的store.jsactions.jsgetters.js,这几个各自的作用及关系?

function makeAction(type) {
  return ({ dispatch }, ...args) => dispatch(type, ...args);
};

action.js中这段代码的意义是什么?

请原谅我的无知,感谢大神指点

阅读 4.8k
4 个回答

个人理解:

1、对于状态管理
你可以认为你定义了一个变量X,这个X最终会渲染到html的某<p>上。
现在你修改了X,你知道,浏览器知道,但是这个html不知道,这就需要一个啥玩意要监视着这个X,当X被修改的时候,察觉并去修改某<p>

2、
store.js里存的就是你的X,只有存在这里,X才会被监视。文件中包含state和mutations,一个是状态一个是修改方法;
getters.js,从这里才能获取到被监视的X;
action.js,从这里修改X,他的变动才会被监视发现。

function makeAction(type) {
  return ({ dispatch }, ...args) => dispatch(type, ...args);
};

其实就是返回了个函数而已,主要执行的就是dispatch。
比如dispatch('X','AAAA'),那么<p>那里就会变成字符串AAAA了。

流程大概就是这样:
actions.js修改→store.js发现修改→getters.js渲染

大致就是这么个意思,根据1.0自己得来的经验。

然而我觉得这么做挺恶心的,兜了一大圈没有靠谱的debug方法,性能还上不去。

看官方文档。另外,你不理解状态管理是什么,就说明你还不需要它

1,什么是状态管理。。从实际应用出发。用户是否登录、文章是否收藏、是否点赞、用户信息、网站信息、等等这些判断是整个应用层都需要的,但是vue呢又是组件化应用,组件之间通讯势必比较麻烦。所以状态管理就是把一些可能需要多组件公用的数据抽离出来,单独管理。

2,store.js保存的就是上面说的可能要公用的数据的仓库,getters.js故名思意就是获取这些数据的,actions.js就是将store.js中修改数据的方法暴漏给组件使用的。。至于为什么不让组件直接修改store.js中的数据,文档有解释,大概是为了解除耦合,并且消除一些副作用

  1. 状态管理。

本来放到各个组件内的数据,现在都集中到一个地方,这个地方叫做store,放到store内的数据的更新和引用就是状态管理。

  1. store.js内放置我刚刚提到的store代码,类似的actions.js放置更新数据的代码、getters.js放置获取数据的代码。

猜你还是不容易懂。不如看这个,有可以运行的代码案例:

https://segmentfault.com/a/11...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
1 篇内容引用
推荐问题
宣传栏