【金秋打卡】第22天 vue基础入门（下）| （22）3-7 VueX 的语法详解（1）

这篇文章可以入选评委评选的最佳手记吗？期待ing…

主要内容：
----------------------good start----------------------
回顾：
在 Vue 里面我们应该如何的去使用路由去做多个页面之间的切换。‍‍

学习内容：
1）学习 Vue 的数据存储方案。

这个方案我们把它叫做 Vue 叉。

我们要创建一个 Vue 的工程，怎么来创建？
首先我进入到我的控制台，‍‍在这里我先要去使用:

因为我的电脑装了很多个node的版本，我现在要用12.13.0这个版本。
然后我们调用 vue create demo这样的一个命令去创建一个 vue 的项目。‍‍

这块选择:

这里选择：

选完 Vue 叉之后我们点回车，然后选 Vue 的版本：

选路由模式，我们还是选no，默认采用哈希路由就是带井号的形式：

ESLint 默认回车就可以了:

不保存 future 再点击回车:

这时候ta会帮我们创建一个新的叫做demo的项目，
在我们的‍‍编辑器里面打开它，然后我们打开编辑器的命令行工具，
运行 npm run‍‍ serve启动我们的服务器：

这块它会启动，我们打开8080端口就好。‍‍

回到我们的‍‍代码里面，我们来看，现在当我们在创建项目的时候，添加了 VueX（叉）这样的数据管理工具之后，‍‍它的代码长成什么样子？

首先我们可以打开 package.json里面来看一下：

这个时候‍‍我们创建项目的时候用了 vue 里面的路由叫做 vue-router。它是4.0的版本，‍‍
也用了VueX（叉）是4.0的版本，
所以这两个相应的工具都已经帮助我们安装好了。‍‍

然后我们点开src这个目录，在这里面我们打开main点js这个入口文件:

你可以看到ta除了‍‍用到了一个router路由之外，ta还用了一个store，‍‍也就是一个全局的仓库，叫做store，也就是VueX（叉）提供给我们的一个仓库:

然后我们再点击store进去，看它里面有一个‍‍ index点js:

这里面就是创建store，调用createStore这个方法创建了一个仓库，
然后里面有actions，‍‍有mutations，有state，还有modules。

我们再来看看路由这块：

路由这块它里面就是一个 About‍‍和一个Home页面。‍‍

我们再来看一下 views 下面的Home点vue里面，我就不用HelloWorld‍‍子主件了，代码清理后如下：

APP点vue里面有一些样式，也干掉:

现在在main点js里面，我用了一个叫做store这样的东西，也就是VueX（叉）帮我们创建的store，‍‍怎么能看出它是VueX（叉）创建的?

我们打开store下面的index点js你可以看到‍‍:

这个创建store的方法是VueX（叉）提供给我们的。

为什么在一个项目中我们要使用VueX（叉）？

首先 VueX（叉）我们可以把它理解成一个数据管理框架，‍‍
我们之前提到过在 vue 里面管理数据可以怎么管理?
我们可以使用父子组件传值的方式去传递一些数据，

当然我们也可以通过provide inject这样的方式，‍‍跨越组件的一些层级去传递一些数据，
但是‍‍，当我们的项目变得越来越复杂的时候，有可能就不是‍‍组件级别的数据传递了，有可能就是页面级别的数据传递。‍‍

比如说‍‍我首页有一些数据变更了之后:

在 About页面也能拿到变更过后的数据，‍‍About 页面改了这个数据之后，首页也能跟着动，或者说你有这几十个页面都要共用一些数据，‍‍都要共同去改变这些数据。

这个时候不管用这种组件之间的传值也好，‍‍还是用provide inject这种语法也好，用它们编写出来的这种代码的可维护性实际上都不会特别的高，‍‍

这个时候我们用VueX（叉）这种数据框架就比较合适。‍‍

VueX（叉）这种数据框架我们怎么用它？
我可以给大家举一个例子，‍‍
首先我们到我们的代码里面，在state里面我们去定一个数据，‍‍这个数据叫做比如说叫name，它叫dell:

实际上VueX（叉）创建了一个store，这是全局唯一的store，

VueX（叉）创建了‍‍一个全局唯一的仓库，用来存放全局的‍‍数据。‍‍

那么我们在这儿通过createStore创建了一个全局的唯一的仓库，
我存一些全局的数据，‍‍现在全局的数据存在哪儿？

state 里面放的就是全局的数据，这里面我们存了一个名字叫做name 这样的全局的数据。‍‍

假设说我现在 在我的首页里面要用这个数据，‍‍在我的列表页面，或者说在我的刚才看到的 About 关于我们的页面也要用这个数据，‍‍
我们怎么去用这个数据?

我们到views下面来找到Home点vue:

在这里面‍‍我们就可以去Home组件里面写一个计算属性，怎么写？

我们写computed它是一个对象，这个对象我们可以写一个叫做myName这样的计算属性，‍‍ta返回什么？

它 return this点$store点state点name，‍‍

logo下面我展示myName这个内容:

保存，然后到页面上刷:

所以我在store里面创建了一个数据叫做dell，这是一个全局的store，任何地方都可以用它，‍‍Home组件如果想用怎么用?

我们在这里写一个计算属性，‍‍名字叫做myName，它可以通过this点$store点state点name获取到VueX（叉）创建的全局仓库里面的数据，

定义的全局的这样的一个数据怎么在组件里面获取?
就这么获取。‍‍

同理在‍‍About 页面里也可以去用这个数据，怎么用？

这样 在首页，在 About 页面都能拿到全局数据。