vuex项目应用理解总结（个人总结理解）

这是一篇关于使用vuex的项目个人记录

vuex是什么？

vuex是“状态管理”，是vue专为程序开发状态的状态，它有几个核心，你应该去官网看看

在上图中，已知 Actions接收到 后端api 执行操作后，到了Mutaions，然后由Mutaions执行 Mutate 到 State，state到Actions的模板组件渲染，然后再到 Actions。这个过程就是vuex的过程。
嗯。。。我们接受数据，提交到模板，再给数据，数据再渲染vue，再返回到actions上

什么情况下我应该使用 Vuex？

这是官网上说的，在项目中使用vuex，可以简化代码提高复用性，能更好的管理和维护，应为代码资源共享，请求某些代码时，也很容易，举个例子：
比如要请求祖父元素的数据，一般都要通过它的父元素，然后才能请求，但是vuex可以省略这些繁琐的步骤，可以直接再共享状态下获取，简洁不繁琐，对写代码的来说能省去很多麻烦。

vuex的实际应用

这其实还是那句话，vuex很早就学了，但是博客一直没写，刚好有用到了，就写一下。
首先看一下vuex的文件。

先说第一张图，api文件夹里的js文件是什么。

js文件就是图表，统计，登录和index ，我说的似乎是名称，但是这就是为了方便后期维护和阅读修改，不同页面的api放在不同js文件里，这里的api就是上图的数据库api，在这里就已经开始vuex的操作了，所有api都放在这里。

然后四第二张图，里面又是js文件，那是干嘛的，名字好像和上面的重复了。

起了一个store的名字，下面是一个modules的文件，里面又是js文件，放的是对应的api。说到这里可能不清楚，还是说一下个人理解吧。
就是上面儿你写的api，是接受后端接口，接口还没被共享，vuex不是共享资源吗，你还要再modules中引入，然后重命名，返回出去，你就可以再项目中引入了，就相当于封装。（我是这理解的，如果有不同意见可以留言，我们共同学习）嘿嘿，其实吧，这个文件下是“根”下面的文件，store下面的文件都是“根”级别的，你要知道

最后第三张图，components

这里面从名字上就能看出，什么 。。头，icon，layout和helloWorld什么的，这个文件的作用和名字一样。

vuex的核心

STATE

核心就那几个，先看官网

我看到了，代议状态数让我们能够直接地定位任一特定的状态片段，很厉害。上面说到，vuex能够简洁逻辑和代码，可以直接获取访问到祖父元素，当然了，这是举个例子。
官网的是返回这个，再用的时候，一般都会再加一个this指向当前的vue实例。为什么添加this，enmmm。。项目东西多可能怕它不知道找谁。 store 是我们上面说的store文件夹，这就是”根“儿，
state就是上图的vuex的状态，count是状态下的某个状态。
我们知道this.$store可以拿到vue对象，嗯。

Getters

getters就是派生新状态，看官网

new 一个vuex实例，就是这样。。。。。
它新建的vuex后面跟了一个store，这是我们的“根”儿啊，这里可以访问我们的数据资源，这里有todo，这个加上去就可以看我们每页的数据，getter是基于todo的操作

Mutations

还是在上图中，我们看到，Mutations是在Actions后的操作，看官网

就是“根”改变，然后提交。

点击触发事件，回调函数执行自增。。。。。
看一下我写的

我这样写，一样可以接受到Actions的变化，enmmm。。。。咋说呢
我们从上图得知，vuex走到Mutations大致是这样的：：：API–Anctions—Mutations
这里就是从modules接收api，api上面也说了，就是从api中获取，这里又回到了，vuex的资源共享的好处上，可以方便的直接找到数据，不用去请求祖级或父级，接收到的数据直接使用。

Actions

Action提交的是mutation,而不是直接变更状态，Action 可以包含任意异步操作
看一下我写的

这里就是一个异步操作

Modules

这个其实上面都提到很多次了，就是模块，嗯。看下官网吧

想说的

其实大致说完了，多做笔记便于回顾温习，嗯，然后就是坚持做笔记和记录工作学习，时“氪“成长，就是打游戏氪金，学习氪时间。其实还没完

这篇文章对你有帮助吗，或者你有什么建议可以评论留言，我会回复你的，下次再见。