vuex4中文官方文档,vuex40

Vuex4.x（一）初识vue3的状态管理-state

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中存储管理应用的所有组件的状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

两种使用方法：

官方给了两个流程图，一个简单的，我们就不看了。

还有一个复杂一点的，如下图：

应该没有翻译错吧。

组件问vuex，用户登录了没？vuex就只能问后端。

等等，不是应该在前端缓存一个登录状态吗？

用户在登录页面完成登录后，后端会返回一个token，然后缓存在前端，以后其他地方问是否登录，直接看这个token不就可以了吗？为啥还有问后端要数据？

如果不需要的话，我就想不出来还有啥状态关系到后端API了。

所以另一个理解就是，vuex其实是支持直接从后端获取数据，然后存入state的，也就是说可以把state当作大号data来看待。

我在这个流程里面加上了一个前端存储的功能，也就是说可以把 state 存在前端，这样刷新、关掉浏览器、关机重启等情况，state 的数据都不会丢失了。便于恢复状态。

我们先来定义一个简单的state，看看在vue3里面有什么变化。

一个简单类型（number）的count，还有一个引用类型的myObject。

我们打印出来看看效果：

未完待续。。。

vue-pdf官方中文文档

vue.js pdf viewer

vue-pdf demo on jsfiddle

TBD: fix the demo

Same browser support as Vue.js 2

since v2.x, the script is exported as esm.

The url of the pdf file. src may also be a string|TypedArray|DocumentInitParameters|PDFDataRangeTransport for more details, see PDFJS.getDocument() .

The page number to display.

The page rotation in degrees, only multiple of 90 are valid.

Document loading progress. Range [0, 1].

Triggered when the document is loaded.

Triggered when a page is loaded.

The total number of pages of the pdf.

Triggered when an error occurred.

Triggered when an internal link is clicked

beware: when the component is destroyed, the object returned by createLoadingTask() become invalid.

Supported options:

img src="" width="16" Franck Freiburger

vue cli4.0 配置环境变量

------------------正文开始------------------

开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？

为了更加方便消化本文章，建议先看下官方文档：

环境变量和模式

看完官方的文档如果还没有明白，可以参考本文。

在vue-cli 构建的项目中，默认有3种模式，如下图：

我个人的理解就是：

你执行npm run serve时，对应的环境就是开发环境；

你执行npm run build时，对应的环境就是生产环境。

如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。

来，左边跟我一起画个龙，在你右边儿画一道彩虹 画完了，开始进入主题了

------------------进入主题------------------

如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：

基本格式如下：

preNODE_ENV=环境名称

VUE_APP_URL=对应的环境地址/pre

如我本地环境的配置就如下图所示：

我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。

如官方文档所说，可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图：

请注意我配置文件中的 serve 与 build 。

文件已创建好，配置语句也已写好。怎么用它呢？

首页你需要哪个环境，就执行哪个环境的命令语句。

比如我现在需要local环境，就执行 npm run local-serve 。如下图所示：

然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url。

比如我们在axios请求中，就可以把它的baseURL设置为 process.env.VUE_APP_URL ，如下图所示：

后面的"/web"是根据我自己接口来的，你别也写个"/web"。

如果你不确定你自己现在是在哪个环境变量下，可以 console.log("当前环境变量："+process.env.NODE_ENV) 和 console.log("当前环境路径："+process.env.VUE_APP_URL) 看下。

像我的项目中就是下面这2个东东：

输出的内容就是.env.local文件里面配置的环境变量。

为了更好的理解，我们再执行一条语句， npm run serve ,看看此时的环境变量是哪个？

为什么呢？

因为 npm run serve 默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：

总而言之就是，你需要哪个环境变量，就 【npm run 对应的环境变量】 就完事了！

Vue3——vue-router4 & vuex4

vue-router

createRouter方法： 用于创建路由器对象。

createWebHashHistory方法： 用于生成hash模式的路由，路由地址中包含一个#。

createWebHistory方法： 用于生成history模式的路由。

在main.js中注册

useRouter方法： 返回当前项目中的路由器对象。

useRoute方法： 返回当前路由信息对象。

vuex4

phone模块

在main.js中注册

useStore方法： 返回当前项目中的全局状态管理对象。

在组合API中，无法使用映射函数。所以自定义映射函数方法，对state数据进行处理。

Vuex4.x（四）action的各种使用方式

由于mutation不支持异步操作，所以vuex又提供了action，这个可以支持异步，在有些情况下就会非常方便。

异步操作分为两种情况，一个是内部的异步操作，一个是外部的异步操作。

比如访问后端API获取数据的时候，又或者把数据存入前端存储的时候。

我们先写个简单的例子

看看参数

我们new 一个 Promise就可以了，里面可以用axios等各种操作。

最后记得返回new出来的实例。

如果不需要知道确定的完成时间的话，可以直接调用

如果要知道的话，可以写个then

这个用法和axios非常相似。

看看运行效果

我们可以自己new 一个promise把axios包含进去，也可以直接返回axios的实例，比如这样

调用方式

这样内部和外部都可以得到axios返回的数据。

如何选择就看对返回数据的封装程度了。

vue官方文档问题。，。，

当你后面的值是一个字符串，前面的命名就可以不用驼峰的写法，正常的写法就可以了，如果后面的值是动态的，前面必须给驼峰的写法