Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3172
Star 105
Fork 804
unidocs-zh
unidocs-zh
提交 a6c5c4c9 编写于 作者: study夏羽's avatar study夏羽
浏览文件
操作

adjust vue nvue

上级 05ca9bbd
隐藏空白更改
内联 并排
Showing with 123 addition and 122 deletion
docs/nvue-api.md
浏览文件 @ a6c5c4c9
......@@ -563,7 +563,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
##### 代码示例:
```html
//test.nvue
<!-- test.nvue -->
<template>
<view @click="test">
<text>点击页面发送数据</text>
......@@ -581,7 +581,7 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
```
```html
//App.vue
<!-- App.vue -->
<script>
export default {
onUniNViewMessage:function(e){
......@@ -613,8 +613,8 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
##### 代码示例:
```javascript
//index.nvue
```html
<!-- index.nvue -->
<template>
<div @click="test">
<text>点击页面发送数据{{num}}</text>
......@@ -644,10 +644,11 @@ BindingX类似一种强化版的css，运行性能高，但没有js那样足够
}
}
}
</script>
```
```html
//test.vue
<!-- test.vue -->
<template>
<view>
<button type="primary" @click="test">点击改变nvue的数据</button>
......
docs/nvue-css.md
浏览文件 @ a6c5c4c9
......@@ -250,7 +250,7 @@ flex {number}：值为 number 类型。
``` html
//Gird布局
<!-- Gird布局 -->
<template>
<view>
<view v-for="(v, i) in list" class="row">
......@@ -295,7 +295,7 @@ flex {number}：值为 number 类型。
``` html
//等高模块
<!-- 等高模块 -->
<template>
<view>
<view style="width:300px; height:100px;">
......@@ -325,7 +325,7 @@ flex {number}：值为 number 类型。
``` html
//水平垂直居中
<!-- 水平垂直居中 -->
<template>
<view class="wrapper">
<view class="box"></view>
......
docs/nvue-outline.md
浏览文件 @ a6c5c4c9
......@@ -56,11 +56,11 @@ uni-app在App端，支持vue页面和nvue页面混搭、互相跳转。也支持
```javascript
// manifest.json
{
// ...
/* App平台特有配置 */
"app-plus": {
"renderer": "native", //App端纯原生渲染模式
}
// ...
// App平台特有配置
"app-plus": {
"renderer": "native", //App端纯原生渲染模式
}
}
```
......@@ -95,14 +95,14 @@ weex的组件和JS API，与uni-app不同。uni-app与微信小程序相同。
- uni-app
```javascript
// manifest.json
{
// ...
/* App平台特有配置 */
"app-plus": {
"nvueCompiler":"uni-app" //是否启用 uni-app 模式
}
}
// manifest.json
{
// ...
// App平台特有配置
"app-plus": {
"nvueCompiler":"uni-app" //是否启用 uni-app 模式
}
}
```
......@@ -144,7 +144,7 @@ weex 编译模式下支持使用 weex ui ，例子[详见](https://ext.dcloud.ne
// manifest.json
{
// ...
/* App平台特有配置 */
// App平台特有配置
"app-plus": {
"nvueStyleCompiler": "uni-app"
}
......@@ -259,10 +259,10 @@ iOS平台默认情况下滚动容器组件（如```list```、```waterfall```组
```html
<list class="scroll-v list" enableBackToTop="true" scroll-y alwaysScrollableVertical="true">
<refresh class="refresh" @refresh="onrefresh()" @pullingdown="onpullingdown">
//refresh content
<!-- refresh content -->
</refresh>
<cell v-for="(newsitem,index) in list" :key="newsitem.id">
//cell content
<!-- cell content -->
</cell>
</list>
```
......
docs/vue-api.md
浏览文件 @ a6c5c4c9
......@@ -274,7 +274,7 @@ uni-app 内置了 [Vuex](https://uniapp.dcloud.io/vue-vuex) ，在app里的使
解决办法有两种（以scroll-view组件为例）：
1.监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
1. 监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
......@@ -308,7 +308,7 @@ export default {
```
2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值
2. 监听scroll事件，获取组件内部变化的值，实时更新其绑定值
```html
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
......
docs/vue-basics.md
浏览文件 @ a6c5c4c9
......@@ -125,9 +125,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
当然还有一些高级的用法
```js
<!-- 直接使用js模块的属性。在hello uni-app有示例 -->
// 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils;
<!-- 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 -->
// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js';
```
......@@ -1502,7 +1502,7 @@ Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据
}
},
watch: {
/* 使用watch来响应数据的变化 */
// 使用watch来响应数据的变化
word(newVal, oldVal) {
console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
}
......
docs/vue-components.md
浏览文件 @ a6c5c4c9
......@@ -92,7 +92,7 @@
- Vue.component 的第一个参数必须是静态的字符串。
- nvue 页面暂不支持全局组件。
1.`main.js` 里进行全局导入和注册
1. `main.js` 里进行全局导入和注册
```js
import Vue from 'vue'
......@@ -100,7 +100,7 @@
Vue.component('page-head',pageHead)
```
2.`index.vue` 里可直接使用组件
2. `index.vue` 里可直接使用组件
```html
......@@ -122,7 +122,7 @@
如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。
1.**传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
1. **传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
```html
<!-- 在index.vue引入 uni-badge 组件-->
......@@ -147,7 +147,7 @@
- 包含了这个组件选项的变量名(仅支持驼峰法命名)
2.**通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
2. **通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
```html
......@@ -375,10 +375,10 @@
```html
//非H5端不支持通过this.$refs.content来获取view实例
<!-- 非H5端不支持通过this.$refs.content来获取view实例 -->
<view ref="content">hello</view>
//支持通过this.$refs.child来获取child-component实例
<!-- 支持通过this.$refs.child来获取child-component实例 -->
<child-component ref="child"></child-component>
```
......@@ -410,7 +410,7 @@
##### 示例：
```html
//base-input子组件页面
<!-- base-input子组件页面 -->
<template>
<view>
<input :focus="isFocus" type="text" placeholder="请输入内容" />
......@@ -438,7 +438,7 @@
```html
//index 父组件页面
<!-- index 父组件页面 -->
<template>
<view>
<base-input ref="usernameInput"></base-input>
......
docs/vue-vuex.md
浏览文件 @ a6c5c4c9
......@@ -185,10 +185,10 @@ const Counter = {
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
1.在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
1. 在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -205,10 +205,10 @@ export default store
```
2.在 `main.js` 中导入文件。
2. 在 `main.js` 中导入文件。
```js
<!-- 页面路径：main.js -->
// 页面路径：main.js
import Vue from 'vue'
import App from './App'
import store from './store'
......@@ -227,7 +227,7 @@ app.$mount()
**获取state**
1.通过属性访问，需要在根节点注入 `store` 。
1. 通过属性访问，需要在根节点注入 `store` 。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -251,7 +251,7 @@ app.$mount()
</script>
```
2.在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
2. 在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -277,7 +277,7 @@ app.$mount()
#### mapState
3.通过 `mapState` 辅助函数获取。
3. 通过 `mapState` 辅助函数获取。
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键：
......@@ -403,7 +403,7 @@ app.$mount()
在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -442,7 +442,7 @@ export default store
- getters, 等同于 store.getters
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -484,7 +484,7 @@ export default store
**获取getters**
1.通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
1. 通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
```html
......@@ -514,7 +514,7 @@ export default store
2.通过 `this.$store` 访问。
2. 通过 `this.$store` 访问。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -539,7 +539,7 @@ export default store
```
3.通过方法访问。
3. 通过方法访问。
你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。
......@@ -570,7 +570,7 @@ export default store
#### mapGetters
4.通过 `mapGetters` 辅助函数访问。
4. 通过 `mapGetters` 辅助函数访问。
`mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性：
......@@ -635,7 +635,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -699,7 +699,7 @@ export default {
- 在 `mutation` 传参（载荷）可以传递一个参数。
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -748,7 +748,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -798,7 +798,7 @@ export default store
**提交方式**
1.对象风格的提交方式
1. 对象风格的提交方式
我们修改组件中 `store.commit` 提交方式：
......@@ -844,7 +844,7 @@ export default store
#### mapMutations
2.通过 `mapMutations` 辅助函数提交。
2. 通过 `mapMutations` 辅助函数提交。
创建组件方法提交 `mutation`。
......@@ -876,7 +876,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -950,7 +950,7 @@ export default store
让我们来注册一个简单的 `action` ：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -995,7 +995,7 @@ export default store
**分发 Action**
1.`actions` 通过 `store.dispatch` 方法触发。
1. `actions` 通过 `store.dispatch` 方法触发。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -1029,7 +1029,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -1103,7 +1103,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -1159,7 +1159,7 @@ export default store
#### mapActions
2.通过 `mapActions` 辅助函数分发。
2. 通过 `mapActions` 辅助函数分发。
创建组件方法分发 `action`。
......@@ -1292,7 +1292,7 @@ export default store
为了解决以上问题，`Vuex` 允许我们将 `store` 分割成模块（module）。每个模块拥有自己的 `state`、`mutation`、`action`、`getter`、甚至是嵌套子模块——从上至下进行同样方式的分割：
1.在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
1. 在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
```html
......@@ -1316,10 +1316,10 @@ export default store
```
2.在 `main.js` 文件中引入 `store`。
2. 在 `main.js` 文件中引入 `store`。
```js
<!-- 页面路径：main.js -->
// 页面路径：main.js
import Vue from 'vue'
import App from './App'
import store from './store'
......@@ -1335,10 +1335,10 @@ export default store
```
3.在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
3. 在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
......@@ -1353,10 +1353,10 @@ export default store
})
```
4.子模块 `moduleA` 页面内容。
4. 子模块 `moduleA` 页面内容。
```js
<!-- 子模块moduleA路径：store/modules/moduleA.js -->
// 子模块moduleA路径：store/modules/moduleA.js
export default {
state: {
text:"我是moduleA模块下state.text的值"
......@@ -1373,10 +1373,10 @@ export default {
}
```
5.子模块 `moduleB` 页面内容。
5. 子模块 `moduleB` 页面内容。
```js
<!-- 子模块moduleB路径：store/modules/moduleB.js -->
// 子模块moduleB路径：store/modules/moduleB.js
export default {
state: {
timestamp: 1608820295//初始时间戳
......@@ -1407,7 +1407,7 @@ export default {
```
6.在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
6. 在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
```html
......@@ -1436,7 +1436,7 @@ export default {
</script>
```
7.在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
7. 在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
```html
<!-- 组件路径：components/myButton/myButton.vue -->
......
docs/vue3-api.md
浏览文件 @ a6c5c4c9
......@@ -364,7 +364,7 @@ export default {
解决办法有两种（以`scroll-view`组件为例）：
1.监听`scroll`事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
1. 监听`scroll`事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
......@@ -398,7 +398,7 @@ export default {
```
2.监听scroll事件，获取组件内部变化的值，实时更新其绑定值
2. 监听scroll事件，获取组件内部变化的值，实时更新其绑定值
```html
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
......
docs/vue3-basics.md
浏览文件 @ a6c5c4c9
......@@ -135,9 +135,9 @@ vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要
当然还有一些高级的用法
```js
<!-- 直接使用js模块的属性。在hello uni-app有示例 -->
// 直接使用js模块的属性。在hello uni-app有示例
var dateUtils = require('../../../common/util.js').dateUtils;
<!-- 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 -->
// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js';
```
......@@ -1707,7 +1707,7 @@ v-for 指令可以实现基于一个数组来渲染一个列表。
}
},
watch: {
/* 使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值*/
//使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值
a: function(newVal, oldVal) {
console.log("a--newVal: ", newVal, "a--oldVal: ",oldVal);
},
......
docs/vue3-components.md
浏览文件 @ a6c5c4c9
......@@ -95,7 +95,7 @@
- app.component 的第一个参数必须是静态的字符串。
- nvue 页面暂不支持全局组件。
1.`main.js` 里进行全局导入和注册
1. `main.js` 里进行全局导入和注册
```js
import App from './App'
......@@ -112,7 +112,7 @@
}
```
2.`index.vue` 里可直接使用组件
2. `index.vue` 里可直接使用组件
```html
......@@ -134,7 +134,7 @@
如下通过两种方式导入一个角标的组件库，[详见](https://ext.dcloud.net.cn/plugin?id=21)，推荐使用 `easycom` 方式引入。
1.**传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
1. **传统vue规范：** 在 index.vue 页面中，通过 `import` 方式引入组件 ，在 `components` 选项中定义你想要使用的组件。
```html
<!-- 在index.vue引入 uni-badge 组件-->
......@@ -159,7 +159,7 @@
- 包含了这个组件选项的变量名(仅支持驼峰法命名)
2.**通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
2. **通过uni-app的[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)：** 将组件引入精简为一步。只要组件安装在项目的 `components` 目录下，并符合 `components/组件名称/组件名称.vue` 目录结构。就可以不用引用、注册，直接在页面中使用。
```html
......@@ -401,7 +401,7 @@
2.**这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性：
2. **这个 `prop` 以一种原始的值传入且需要进行转换**。在这种情况下，最好使用这个 `prop` 的值来定义一个计算属性：
```html
......@@ -607,7 +607,7 @@
```js
<!-- 我是子组件date-picker -->
// 我是子组件date-picker
export default {
created() {
console.log(this.$attrs) // { onChange: () => {} }
......@@ -679,7 +679,7 @@
有了这个新配置，`data status` attribute 将应用于 `input` 元素！
```js
```html
<!-- Date-picker 组件 使用非 prop attribute -->
<date-picker data-status="activated"></date-picker>
......@@ -700,15 +700,15 @@
```
```html
// 我是custom-layout组件
// 这将发出警告
<!-- 我是custom-layout组件 -->
<!-- 这将发出警告 -->
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
// 没有警告，$attrs被传递到<main>元素
<!-- 没有警告，$attrs被传递到<main>元素 -->
<template>
<header>...</header>
......
docs/vue3-vuex.md
浏览文件 @ a6c5c4c9
......@@ -191,10 +191,10 @@ const Counter = {
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
1.在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
1. 在 `uni-app` 项目根目录下，新建 `store` 目录，在此目录下新建 `index.js` 文件。在 `index.js` 文件配置如下：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state:{//存放状态
......@@ -207,10 +207,10 @@ export default store
```
2.在 `main.js` 中导入文件。
2. 在 `main.js` 中导入文件。
```js
<!-- 页面路径：main.js -->
// 页面路径：main.js
import App from './App'
import store from './store'
import {createSSRApp} from 'vue'
......@@ -226,7 +226,7 @@ export function createApp() {
**获取state**
1.通过属性访问，需要在根节点注入 `store` 。
1. 通过属性访问，需要在根节点注入 `store` 。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -250,7 +250,7 @@ export function createApp() {
</script>
```
2.在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
2. 在组件中使用，通过 `this.$store` 访问到 `state` 里的数据。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -276,7 +276,7 @@ export function createApp() {
#### mapState
3.通过 `mapState` 辅助函数获取。
3. 通过 `mapState` 辅助函数获取。
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 **mapState 辅助函数** 帮助我们生成计算属性，让你少按几次键：
......@@ -404,7 +404,7 @@ export function createApp() {
在 `uni-app` 项目根目录下，`store` 目录 `index.js` 文件下：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -437,7 +437,7 @@ export default store
- getters, 等同于 store.getters
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
......@@ -475,7 +475,7 @@ export default store
**获取getters**
1.通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
1. 通过属性访问，`Getter` 会暴露为 `store.getters` 对象，你可以以属性的形式访问这些值。
```html
......@@ -505,7 +505,7 @@ export default store
2.通过 `this.$store` 访问。
2. 通过 `this.$store` 访问。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -530,7 +530,7 @@ export default store
```
3.通过方法访问。
3. 通过方法访问。
你也可以通过让 `getter` 返回一个函数，来实现给 `getter` 传参。在你对 `store` 里的数组进行查询时非常有用。
......@@ -561,7 +561,7 @@ export default store
#### mapGetters
4.通过 `mapGetters` 辅助函数访问。
4. 通过 `mapGetters` 辅助函数访问。
`mapGetters` 辅助函数仅仅是将 `store` 中的 `getter` 映射到局部计算属性：
......@@ -626,7 +626,7 @@ Vuex 中的 `mutation` 非常类似于事件：每个 `mutation` 都有一个字
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -685,7 +685,7 @@ export default {
- 在 `mutation` 传参（载荷）可以传递一个参数。
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -730,7 +730,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -775,7 +775,7 @@ export default store
**提交方式**
1.对象风格的提交方式
1. 对象风格的提交方式
我们修改组件中 `store.commit` 提交方式：
......@@ -821,7 +821,7 @@ export default store
#### mapMutations
2.通过 `mapMutations` 辅助函数提交。
2. 通过 `mapMutations` 辅助函数提交。
创建组件方法提交 `mutation`。
......@@ -853,7 +853,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -923,7 +923,7 @@ export default store
让我们来注册一个简单的 `action` ：
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -964,7 +964,7 @@ export default store
**分发 Action**
1.`actions` 通过 `store.dispatch` 方法触发。
1. `actions` 通过 `store.dispatch` 方法触发。
```html
<!-- 页面路径：pages/index/index.vue -->
......@@ -998,7 +998,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -1068,7 +1068,7 @@ export default store
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import { createStore } from 'vuex'
const store = createStore({
state: {
......@@ -1120,7 +1120,7 @@ export default store
#### mapActions
2.通过 `mapActions` 辅助函数分发。
2. 通过 `mapActions` 辅助函数分发。
创建组件方法分发 `action`。
......@@ -1253,7 +1253,7 @@ export default store
为了解决以上问题，`Vuex` 允许我们将 `store` 分割成模块（module）。每个模块拥有自己的 `state`、`mutation`、`action`、`getter`、甚至是嵌套子模块——从上至下进行同样方式的分割：
1.在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
1. 在 `store` 文件夹下新建 `modules` 文件夹，并在下面新建 `moduleA.js` 和 `moduleB.js` 文件用来存放 `vuex` 的 `modules` 模块。
```html
......@@ -1277,10 +1277,10 @@ export default store
```
2.在 `main.js` 文件中引入 `store`。
2. 在 `main.js` 文件中引入 `store`。
```js
<!-- 页面路径：main.js -->
// 页面路径：main.js
import {createSSRApp} from 'vue'
import store from './store'
export function createApp() {
......@@ -1293,10 +1293,10 @@ export default store
```
3.在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
3. 在项目根目录下，新建 `store` 文件夹，并在下面新建 `index.js` 文件，作为模块入口，引入各子模块。
```js
<!-- 页面路径：store/index.js -->
// 页面路径：store/index.js
import {createStore} from 'vuex'
import moduleA from '@/store/modules/moduleA'
import moduleB from '@/store/modules/moduleB'
......@@ -1308,10 +1308,10 @@ export default createStore({
})
```
4.子模块 `moduleA` 页面内容。
4. 子模块 `moduleA` 页面内容。
```js
<!-- 子模块moduleA路径：store/modules/moduleA.js -->
// 子模块moduleA路径：store/modules/moduleA.js
export default {
state: {
text:"我是moduleA模块下state.text的值"
......@@ -1328,10 +1328,10 @@ export default {
}
```
5.子模块 `moduleB` 页面内容。
5. 子模块 `moduleB` 页面内容。
```js
<!-- 子模块moduleB路径：store/modules/moduleB.js -->
// 子模块moduleB路径：store/modules/moduleB.js
export default {
state: {
timestamp: 1608820295//初始时间戳
......@@ -1362,7 +1362,7 @@ export default {
```
6.在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
6. 在页面中引用组件 myButton ，并通过 `mapState` 读取 `state` 中的初始数据。
```html
......@@ -1391,7 +1391,7 @@ export default {
</script>
```
7.在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
7. 在组件 `myButton`中，通过 `mutations` 操作刷新当前时间。
```html
<!-- 组件路径：components/myButton/myButton.vue -->
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或