uniapp页面通信

最新推荐文章于 2024-06-05 11:54:37 发布
最新推荐文章于 2024-06-05 11:54:37 发布
阅读量1.6k 收藏 9
点赞数 2
分类专栏： uniapp 文章标签： uni-app 前端 spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67388537/article/details/131736541
版权

在uni中，想要实现页面通讯，比较主流的有5中方式，这4中方式各有各的优缺点，请谨慎选择。

  • 路由传参
  • globalData
  • 本地缓存
  • vuex
  • uni自带API方式

优缺点:
路由传参和本地缓存是长久存储，刷新页面数据不会丢失，但路由传参适用于数据比较少的情形。

globalData适用于小型项目，vuex适用于中大型项目。

1. 路由传参

适用场景:
适合于简单的页面传参，传递的参数比较少，如传递的比较多，推荐适用globalData、本地缓存、vuex。

A页面向B页面传递参数

uni.navigateTo({  
    url: 'test/test?id=1&name=张三'  
});

B页面接收A页面传递的参数

export default {  
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数  
        console.log(option.id); //打印出上个页面传递的参数。  
        console.log(option.name); //打印出上个页面传递的参数。  
    }  
}

2. globalData

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

以下是 App.vue 中定义globalData的相关配置：

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>

js中操作globalData的方式如下： getApp().globalData.text = 'test'

3. 本地缓存

uni是一个跨平台的框架，可以编译运行到小程序、H5、APP等。
单纯的localstorage在uni中只能在H5端使用，如需在不同平台都能使用，得使用官方推荐得API。

3.1 uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

3.2 uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明

参数类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

3.3 uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数，res = {data: key对应的内容}
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数类型说明
dataAnykey 对应的内容

示例

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

3.4 uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明

参数类型必填说明
keyString是本地缓存中的指定的 key

示例

try {
    const value = uni.getStorageSync('storage_key');
    if (value) {
        console.log(value);
    }
} catch (e) {
    // error
}

3.5 uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序
HBuilderX 2.0.3+√√√√

OBJECT 参数说明

参数名类型必填说明
successFunction是接口调用的回调函数，详见返回参数说明
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数类型说明
keysArray＜String＞当前 storage 中所有的 key
currentSizeNumber当前占用的空间大小, 单位：kb
limitSizeNumber限制的空间大小, 单位：kb

示例

uni.getStorageInfo({
    success: function (res) {
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
});

3.6 uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序
HBuilderX 2.0.3+√√√√

示例

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

3.7 uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

OBJECT 参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key
successFunction是接口调用的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

示例

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

3.8 uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

参数说明

参数名类型必填说明
keyString是本地缓存中的指定的 key

示例

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

3.9 uni.clearStorage()

清理本地数据缓存。

示例

uni.clearStorage();

3.10 uni.clearStorageSync()

同步清理本地数据缓存。

示例

try {
    uni.clearStorageSync();
} catch (e) {
    // error
}

注意

uni-app的Storage在不同端的实现不同：

  • H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
  • App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
  • 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
  • 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
  • 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
  • 百度、字节跳动小程序文档未说明大小限制

除此之外，其他数据存储方案：

  • H5端还支持websql、indexedDB、sessionStorage
  • App端还支持SQLite、IO文件等本地存储方案。

从HBuilderX2.6.6+起，App-Android平台对本地storage数据存储进行了性能优化，它的具体优化方式和升级注意事项，详见：Android平台 storage性能优化说明 - DCloud问答

4. VueX

uni-app 内置了 Vuex 。
使用 Vuex 需要遵守的规则：

  • 应用层级的状态应该集中到单个 store 对象中。

  • 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

  • 异步逻辑都应该封装到 action 里面。

4.1 在uni中使用vuex:

  • 在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下：
// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    state:{//存放状态
        "username":"foo"
        "age":18
    }
})
export default store
  • 在 main.js 中导入文件。
<!-- 页面路径：main.js -->
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
    store,
    ...App
})
app.$mount()

4.2 获取state

1.通过属性访问，需要在根节点注入 store 。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <text>用户名：{{username}}</text>
    </view>
</template>
<script>
    import store from '@/store/index.js';//需要引入store
    export default {
        data() {
            return {}
        },
        computed: {
            username() {
                return store.state.username 
            }
        }
    }
</script>

2.在组件中使用，通过 this.$store 访问到 state 里的数据。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <text>用户名：{{username}}</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        computed: {
            username() {
                return this.$store.state.username 
            }
        }
    }
</script>

4.3 mapState

3.通过 mapState 辅助函数获取。

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
为了解决这个问题，我们可以使用 mapState 辅助函数 帮助我们生成计算属性，让你少按几次键：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>用户名：{{username}}</view>
        <view>年龄：{{age}}</view>
    </view>
</template>
<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {}
        },
        computed: mapState({
            // 从state中拿到数据 箭头函数可使代码更简练
            username: state => state.username,
            age: state => state.age,
        }) 
    }
</script>
  • 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>用户名：{{username}}</view>
        <view>年龄：{{age}}</view>
    </view>
</template>
<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {}
        },
        computed: mapState([
            'username',//映射 this.username 为 store.state.username
            'age',
        ])
    }
</script>
  • 为了能够使用 this 获取组件自己的data数据，必须使用常规函数。
<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>用户名：{{username}}</view>
        <view>年龄：{{age}}</view>
    </view>
</template>
<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {
                firstName:"Li"
            }
        },    
        computed: {
            ...mapState({
                username: function (state) {
                    return this.firstName + ' ' +  state.username 
                },
                age: state => state.age,
            })
        },
    }
</script>
  • 使用对象展开运算符

mapState 函数返回的是一个对象。使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。极大地简化写法：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>用户名：{{username}}</view>
        <view>年龄：{{age}}</view>
    </view>
</template>
<script>
    import { mapState } from 'vuex'//引入mapState
    export default {
        data() {
            return {}
        },
        computed: {
            //使用对象展开运算符将此对象混入到外部对象中
            ...mapState({
                username: state => state.username,
                age: state => state.age,
            })
        },
    }
</script>

4.4 Getter

可以认为是 store 的计算属性，对 state 的加工，是派生出来的数据。

  • 就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
  • 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。

在 uni-app 项目根目录下，store 目录 index.js 文件下：

<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        todos: [{
                id: 1,
                text: '我是内容一',
                done: true
            },
            {
                id: 2,
                text: '我是内容二',
                done: false
            }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        }
    }
})

export default store

在 store 上注册 getter，getter 方法接受以下参数：

  • state, 如果在模块中定义则为模块的局部状态
  • getters, 等同于 store.getters
<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        todos: [{
                id: 1,
                text: '我是内容一',
                done: true
            },
            {
                id: 2,
                text: '我是内容二',
                done: false
            }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        doneTodosCount: (state, getters) => {
            //state ：可以访问数据
            //getters：访问其他函数，等同于 store.getters
            return getters.doneTodos.length
        },
        getTodoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})

export default store

4.5 获取getters

1.通过属性访问，Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>    
        <view v-for="(item,index) in todos">
            <view>{{item.id}}</view>
            <view>{{item.text}}</view>
            <view>{{item.done}}</view>
        </view>
    </view>
</template>
<script>
    import store from '@/store/index.js'//需要引入store
    export default {
        computed: {
            todos() {
                return store.getters.doneTodos
            }
        }
    }
</script>

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

2.通过 this.$store 访问。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>    
        <view v-for="(item,index) in todos">
            <view>{{item.id}}</view>
            <view>{{item.text}}</view>
            <view>{{item.done}}</view>
        </view>
    </view>
</template>
<script>
    export default {
        computed: {
            todos() {
                return this.$store.getters.doneTodos
            }
        }
    }
</script>

3.通过方法访问。

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view v-for="(item,index) in todos">
            <view>{{item}}</view>
        </view>
    </view>
</template>
<script>
    export default {
        computed: {
            todos() {
                return this.$store.getters.getTodoById(2) 
            }
        }
    }
</script>

4.6 mapGetters

4.通过 mapGetters 辅助函数访问。

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>{{doneTodosCount}}</view>
    </view>
</template>
<script>
    import {mapGetters} from 'vuex' //引入mapGetters
    export default {
        computed: {
            // 使用对象展开运算符将 getter 混入 computed 对象中
            ...mapGetters([
                'doneTodos',
                'doneTodosCount',
                // ...
            ])
        }
    }
</script>

如果你想将一个 getter 属性另取一个名字，使用对象形式：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>{{doneCount}}</view>
    </view>
</template>
<script>
    import {mapGetters} from 'vuex' //引入mapGetters
    export default {
        computed: {
            ...mapGetters({
              // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
              doneCount: 'doneTodosCount'
            })
        }
    }
</script>

4.7 Mutation

Vuex中store数据改变的唯一方法就是mutation

通俗的理解，mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部放在 mutations 里，使数据和视图分离。

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            // 变更状态
            state.count += 2
        }
    }
})
export default store

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 add 的 mutation 时，调用此函数”，要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法。

注意：store.commit 调用 mutation（需要在根节点注入 store）。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count}}</view>
        <button @click="addCount">增加</button>
    </view>
</template>
<script>
import store from '@/store/index.js'    
export default {
    computed: {
        count() {
            return this.$store.state.count
        }
    },
    methods: {
        addCount() {
            store.commit('add')
        }
    }
}
</script>

传入参数

你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：

还是以累加器的例子来实现 mutation 函数的传参，来动态定义累加的数量。

  • 在 mutation 传参（载荷）可以传递一个参数。
<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state, n) {
            state.count += n
        }
    }
})
export default store
<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count }}</view>
        <button @click="addCount">增加</button>
    </view>
</template>
<script>
    import store from '@/store/index.js'
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            addCount() {
                store.commit('add', 5)//每次累加 5
            }
        }
    }
</script>
  • 在 mutation 传参（载荷）可以也可以传递一个对象。让我们修改上面累加器的例子：
<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state, payload) {
            state.count += payload.amount
        }
    }
})
export default store

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count }}</view>
        <button @click="addCount">增加</button>
    </view>
</template>
<script>
    import store from '@/store/index.js'
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            addCount () {//把载荷和type分开提交
                store.commit('add', { amount: 10 })
            }
        }
    }
</script>

提交方式

1.对象风格的提交方式

我们修改组件中 store.commit 提交方式：

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count }}</view>
        <button @click="addCount">增加</button>
    </view>
</template>
<script>
    import store from '@/store/index.js'
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            addCount() {//整个对象都作为载荷传给 mutation 函数
                store.commit({
                    type: 'add',
                    amount: 6
                })
            }
        }
    }
</script>

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

    mutations: {
        add(state, payload) {
            state.count += payload.amount
        }
    }

4.8 mapMutations

2.通过 mapMutations 辅助函数提交。

创建组件方法提交 mutation。

使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count}}</view>
        <button @click="add">增加</button>
    </view>
</template>
<script>
    import { mapMutations } from 'vuex'//引入mapMutations
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            ...mapMutations(['add'])//对象展开运算符直接拿到add
        }
    }
</script>
<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations: {
        add(state) {
            // 变更状态
            state.count += 2
        }
    }
})
export default store

遵守规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

  • 最好提前在你的 store 中初始化好所有所需属性。

  • 当需要在对象上添加新属性时，你应该

    • 使用 Vue.set(obj, 'newProp', 123), 或者

    • 以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：

    state.obj = { ...state.obj, newProp: 123 }

Mutation 必须是同步函数

一条重要的原则就是要记住** mutation 必须是同步函数**

我们要通过提交 mutation 的方式来改变状态数据，是因为我们想要更明确地追踪到状态的变化。如果是类似下面这样异步的话：

    mutations: {
        someMutation (state) {
            api.callAsyncMethod(() => {
                state.count++
            })
        }
    }

我们就不知道什么时候状态会发生改变，所以也就无法追踪了，这与 mutation 的设计初心相悖，所以强制规定它必须是同步函数。

4.9 Action

action 类似于 mutation ，不同在于：

  • action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
  • action 可以包含任意异步操作。

让我们来注册一个简单的 action ：

<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations:{
        add(state) {
            // 变更状态
            state.count += 2
        }
    },
    actions:{
        addCountAction (context) {
            context.commit('add')
        }
    }
})
export default store

action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：

    actions: {
        //参数解构
        addCountAction ({commit}) {
            commit('add')
        }
    }

分发 Action

1.actions 通过 store.dispatch 方法触发。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count}}</view>
        <button @click="add">增加</button>
    </view>
</template>
<script>
    import store from '@/store/index.js';
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            add () {
                store.dispatch('addCountAction')
            }
        }
    }
</script>
  • actions 支持以载荷形式分发:
<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations:{
        add(state, payload) {
            state.count += payload.amount
        } 
    },
    actions:{
        addCountAction (context , payload) {
            context.commit('add',payload)
        }
    }
})
export default store
<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count }}</view>
        <button @click="add">增加</button>
    </view>
</template>
<script>
    import store from '@/store/index.js';
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            add () {
                // 以载荷形式分发
                store.dispatch('addCountAction', {amount: 10})
            }
        }
    }
</script>
  • actions 支持以对象形式分发:
    methods: {
        add () {
            // 以对象形式分发
            store.dispatch({
                type: 'addCountAction',
                amount: 5
            })
        }
    }

action 可以执行任意的同步和异步操作

我们可以在 action 内部执行异步操作：

<!-- 页面路径：store/index.js -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: 1
    },
    mutations:{
        add(state) {
            // 变更状态
            state.count += 2
        }
    },
    actions:{
        addCountAction (context) {
            //在执行累加的时候，会等待两秒才执行
            setTimeout(function () {
                context.commit('add')
            }, 2000)
        }
    }
})
export default store

来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutation：

    actions: {
        checkout ({ commit, state }, products) {
            // 把当前购物车的物品备份起来
            const savedCartItems = [...state.cart.added]
            // 发出结账请求，然后乐观地清空购物车
            commit(types.CHECKOUT_REQUEST)
            // 购物 API 接受一个成功回调和一个失败回调
            shop.buyProducts(
                products,
                // 成功操作
                () => commit(types.CHECKOUT_SUCCESS),
                // 失败操作
                () => commit(types.CHECKOUT_FAILURE, savedCartItems)
            )
        }
    }

注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的状态变更。

4.10 mapActions

2.通过 mapActions 辅助函数分发。

创建组件方法分发 action。

  • 你在组件中使用 this.$store.dispatch('xxx') 分发 action
  • 或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store ）
<!-- 页面路径：pages/index/index.vue -->
<template>
    <view>
        <view>数量：{{count }}</view>
        <button @click="addCountAction">增加</button>
    </view>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        computed: {
            count() {
                return this.$store.state.count
            }
        },
        methods: {
            ...mapActions([
                'addCountAction', 
                // 将 `this.addCountAction()` 映射为 `this.$store.dispatch('addCountAction')`
            ])
        }
    }
</script>
  • mapActions 也支持传入参数（载荷）：
    methods: {
        ...mapActions([
            'addCountAction' 
            // 将 `this.addCountAction(amount)` 映射为 
            //`this.$store.dispatch('addCountAction', amount)`
        ]),
    }
  • mapActions 也支持传递一个对象：
    methods: {
        ...mapActions({
            addCount: 'addCountAction',
            // 将 `this.addCount()` 映射为 `this.$store.dispatch('addCountAction')`
        })
    }

组合 Action

action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise ：

    actions: {
        actionA ({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('someMutation')
                    resolve()
                }, 1000)
            })
        }
    }

现在你可以在组件中使用：

    store.dispatch('actionA').then(() => {
        // ...
    })

在另外一个 action 中也可以：

    actions: {
        // ...
        actionB ({ dispatch, commit }) {
            return dispatch('actionA').then(() => {
                commit('someOtherMutation')
            })
        }
    }

最后，如果我们利用 async / await，我们可以如下组合 action ：

    // 假设 getData() 和 getOtherData() 返回的是 Promise
    actions: {
        async actionA ({ commit }) {
            commit('gotData', await getData())
        },
        async actionB ({ dispatch, commit }) {
            await dispatch('actionA') // 等待 actionA 完成
            commit('gotOtherData', await getOtherData())
        }
    }

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

4.11 Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

1.在 store 文件夹下新建 modules 文件夹，并在下面新建 moduleA.js 和 moduleB.js 文件用来存放 vuex 的 modules 模块。

├── components             # 组件文件夹
    └── myButton 
        └── myButton.vue   # myButton组件
├── pages
    └── index 
        └── index.vue      # index页面
├── static
├── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    └── modules           # 模块文件夹
        ├── moduleA.js    # 模块moduleA
        └── moduleB.js    # 模块moduleB
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

2.在 main.js 文件中引入 store。

<!-- 页面路径：main.js -->
    import Vue from 'vue'
    import App from './App'
    import store from './store'

    Vue.prototype.$store = store

    // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
    const app = new Vue({
        store,
        ...App
    })
    app.$mount()

3.在项目根目录下，新建 store 文件夹，并在下面新建 index.js 文件，作为模块入口，引入各子模块。

<!-- 页面路径：store/index.js -->
    import Vue from 'vue'
    import Vuex from 'vuex'

    import moduleA from '@/store/modules/moduleA'
    import moduleB from '@/store/modules/moduleB'

    Vue.use(Vuex)
    export default new Vuex.Store({
        modules:{
            moduleA,moduleB
        }
    })

4.子模块 moduleA 页面内容。

<!-- 子模块moduleA路径：store/modules/moduleA.js -->
export default {
    state: {
        text:"我是moduleA模块下state.text的值"
    },
    getters: {

    },
    mutations: {

    },
    actions: { 

    }
}

5.子模块 moduleB 页面内容。

<!-- 子模块moduleB路径：store/modules/moduleB.js -->
export default {
    state: {
        timestamp: 1608820295//初始时间戳
    },
    getters: {
        timeString(state) {//时间戳转换后的时间
            var date = new Date(state.timestamp);
            var year = date.getFullYear();
            var mon  = date.getMonth()+1;
            var day  = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            var trMon = mon<10 ? '0'+mon : mon
            var trDay = day<10 ? '0'+day : day
            return year+'-'+trMon+'-'+trDay+" "+hours+":"+minu+":"+sec;
        }
    },
    mutations: {
        updateTime(state){//更新当前时间戳
            state.timestamp = Date.now()
        }
    },
    actions: {

    }
}

6.在页面中引用组件 myButton ，并通过 mapState 读取 state 中的初始数据。

<!-- 页面路径：pages/index/index.vue -->
<template>
    <view class="content">
        <view>{{text}}</view>
        <view>时间戳：{{timestamp}}</view>
        <view>当前时间:{{timeString}}</view>
        <myButton></myButton>
    </view>
</template>
<script>
    import {mapState,mapGetters} from 'vuex' 
    export default {
        computed: {
            ...mapState({
                text: state => state.moduleA.text,
                timestamp: state => state.moduleB.timestamp
            }),
            ...mapGetters([
                'timeString'
            ])
        }
    }
</script>

7.在组件 myButton中，通过 mutations 操作刷新当前时间。

<!-- 组件路径：components/myButton/myButton.vue -->
<template>
    <view>
        <button type="default" @click="updateTime">刷新当前时间</button>
    </view>
</template>
<script>
    import {mapMutations} from 'vuex'
    export default {
        data() {
            return {}
        },
        methods: {
            ...mapMutations(['updateTime'])
        }
    }
</script>

vue是单向数据流，子组件不能直接修改父组件的数据，而通过vuex状态管理实现：把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

5. uni自带API方式

5.1 $emit方法

uni.$emit(eventName,OBJECT)
触发全局的自定义事件。附加参数都会传给监听器回调。

属性类型描述
eventNameString事件名称
OBJECTObject触发事件携带的附加参数

代码示例：

uni.$emit('update',{msg:'页面更新'})

5.2 $on方法

uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

属性类型描述
eventNameString事件名称
callbackFunction事件的回调函数

代码示例

uni.$on('update',function(data){
    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
})

参考链接：
https://uniapp.dcloud.io/tutorial/page.html#页面通讯

温柔的二斤半
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp个人中心页面开发.docx
10-10
综上所述，开发uniapp个人中心页面不仅需要掌握uniapp的基础组件用法，还需要熟悉Vue的高级特性，如组件自定义、数据通信，以及CSS布局和样式设计技巧。通过这些知识的综合运用，可以构建出美观且功能完善的个人中心...
【移动端】uniapp：实现页面间通讯
朝拜者
03-17 1502
uniapp：实现页面间通讯
un-app uni.navigateTo页面跳转做封装传参
热门推荐
YanGo的博客
09-01 2万+
uni-app在页面跳转的时候是可以传参的，官方给的方法就是在路由后拼接传参地址 uni.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 OBJECT参数说明 参数 类型 必填 默认值 说明 平台差异说明 url String 是 需要跳转的应用...
微信小程序与uni-app的全局变量管理：深度解析与实战演练
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-11 874
在实际项目中，你是如何权衡微信小程序的globalData与uni-app中的Vuex的使用？面对复杂的状态管理，是否尝试过其他方案，如Redux、MobXState Management？在处理全局变量时，遇到过哪些性能瓶颈或安全问题，又是如何解决的？欢迎在评论区分享你的经验，一起探讨最佳实践，让小程序开发更加高效与安全。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
uniapp中页面之间通信
qq_39695210的博客
03-20 948
uniapp中页面之间通信
uniapp页面通信方法总汇
油墨香^-^的博客
02-22 1025
uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。A页面向B页面传递参数B页面接收A页面传递的参数自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
uni-app中，常见页面通讯方式
张晓健的博客
06-27 370
在 stores/counter.js 中存放Pinina 数据。第二种方式使用onLoad(options) 来接收。第一种方式使用props来接收。在App.vue中配置globalData。
基于uniapp 的demo
04-06
同时，uniapp还提供了自定义事件，用于组件间的通信。 6. **网络请求**：uniapp提供了uni.request API进行网络请求，支持GET、POST等多种HTTP方法，可以方便地与后端API进行交互。同时，uniapp也支持上传下载文件、...
（uniapp框架）手动封装webview页面与App交互sdk
01-30
在这个特定的场景中，我们关注的是如何手动封装一个Webview页面与App的交互SDK，以便实现H5页面与原生App之间的通信。这个过程涉及到的关键技术包括uniApp的API调用、JavaScript接口（JSSDK）的构建以及事件的处理。...
Uniapp支付链转二维码
07-31
【标签】"uniapp 跳转"指的是在Uniapp中实现页面间的跳转。在支付过程中，可能需要在支付成功页和订单详情页之间切换。利用`uni.navigateTo`、`uni.redirectTo`、`uni.reLaunch`等API可以实现不同页面之间的导航。 ...
uniapp subNvue 写的视频播放
11-03
其中，subNvue是uniapp的一个特色功能，主要用于处理页面中的子组件，特别是对于性能要求较高的场景，如视频播放。下面我们将深入探讨如何使用uniapp的subNvue来实现高效、功能丰富的视频播放功能。 1. **uniapp与...
uniApp页面通讯
m0_74265396的博客
11-07 619
在 Uniapp 中，可以使用 uni.$emit 和 uni.$on 方法来实现事件总线。uni.$emit：与事件总线类似，uni.$emit 也可以用来实现页面之间的通讯。它也是通过 $emit 和 $on 方法进行绑定和监听的，不过它是全局对象 uni 上的方法，可以在任何页面中调用。Vuex：Vuex 是一种专门为 Vue.js 开发的状态管理库，它可以将需要共享的数据集中存储，以便于在多个组件中共享。以上是一个简单的示例，演示了 Uniapp 中使用事件总线实现页面通讯的方法。
uni-app页面通讯总结
weixin_45308139的博客
09-29 1093
uni-app组件间的传值方法，是结合了vue及uni-app两种语法，这篇总结来讲解组件传值，较为基础，也较好理解。
uniapp页面之间通信方式
m0_70542915的博客
03-11 198
记录个人已知uniapp页面之间传参方式
关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)
wangyujia12的博客
09-13 1909
/此处需要注意的是如果项目本身要打包成app,记得使用条件编译，否则在app运行时本次引入会报错。在“一“的app接收h5传值部分我也写了。1，在h5项目的mian.js中引入。二.扫码过后app向h5传值并跳转。2.h5页面给app传值部分。2.h5接收app传过来的值。一.h5传值给app。js由于我做的是扫码。
微信小程序（uniapp）页面之间通信
最新发布
Rocky_Time的博客
06-05 819
本文简单介绍了微信小程序页面之间数据通信，若有其他更好的通信方式，欢迎评论区补充。
uniApp页面通讯大汇总，如何页面之间传值
qq_44695769的博客
06-06 646
我们在一个页面往另一个页面跳转的时候，希望跳转的页面的参数是动态生成的，可以复用的。比如我们在逛淘宝的时候，我们点击一个商品，进去就是商品的详情页。商品和商品详情页的对应关系就需要商业页面给商品详情页面传递商品的信息参数。但是因为作用域的原因,evenetChannel在不同页面的变量可以重名，eventChannel更适合父传子，uni.$on适合子传父。而且有时候我们甚至希望能传递多个通讯信息。这样跳转的页面就可以提供更加差异化的复制功能。需要在声明之后才能触发，所以我们需要在回调函数里面触发。
uniapp跨页面通讯几种方法记录
Anlittlecat的博客
03-21 531
uniapp跨页面通讯几种方法记录
uniapp udp通信
10-18
Uniapp本身并不支持UDP通信，但可以通过引入第三方插件实现UDP通信。其中比较常用的插件有uni-udp和uni-socket，它们都提供了UDP通信的API接口。 使用uni-udp插件实现UDP通信的步骤如下： 1. 在manifest.json文件中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值