-
Vuex4-06-Mutation
mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
const store = createStore(...
2021-08-29 13:01:55 |
VUE
-
Vuex4-05-getter
Getter
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
如果有多个组件需要用到此属性,我们要么复制这个函数,或者...
2021-08-29 13:01:55 |
VUE
-
Vuex4-04-state
单一状态树
Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。
至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块...
2021-08-29 13:01:55 |
VUE
-
Vuex4-03-开始
开始
每一个 Vuex 应用的核心就是 store(仓库)。
“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你不...
2021-08-29 13:01:55 |
VUE
-
Vuex4-02-安装
直接下载 / CDN 引用
https://unpkg.com/vuex@4
Unpkg.com 提供了基于 npm 的 CDN 链接。
以上的链接会一直指向 npm 上发布的最新版本。
您也可以通过 https://unpkg.com/vuex@4.0.0/dist/vuex.global.js 这样的方式指定特定的版本。
在 Vue 之后引入 vuex 会进行自动安装:
&...
2021-08-29 13:01:55 |
VUE
-
Vuex4- vuex 是什么?
Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
什么是“状态管理模式”?
让我们从一个简单的 Vue 计数应用开始:
const Counter = {
// 状态
data () {
return {
count:...
2021-08-29 13:01:55 |
VUE
-
Vue Router v4.x 03-chat
chat
详细介绍一下 vue-router
Vue Router 是 Vue.js 的官方路由管理器,它允许你为单页应用程序创建页面路由。
使用 Vue Router,你可以定义不同的路由,为用户导航到不同的视图,同时保持应用程序的单页特性。以下是 Vue Router 的一些核心特性:
动态路由:Vue Router 允许你定义动态路由,即路由的某些部分可以作为变...
2021-08-29 13:01:55 |
VUE
-
Vue Router v4.x -02-实战测试解决报错 npm ERR! Unsupported URL Type workspace workspace
html 的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue ...
2021-08-29 13:01:55 |
VUE