Vuex 学习

本章介绍Vuex Actions使用

Vuex Actions是处理一步操作的，如果有异步操作，必须放到这里。如果要更改state，再调用mutations。
有两个使用方法：

第一种：使用this.$store.dispatch('changeAsync', "1111ddd1111111")

具体看代码：
vuex对象代码：

import Vue from "vue"
import Vuex from "vuex"Vue.use(Vuex)const store = new Vuex.Store({state: {token: "123123123"},mutations: {settoken(state, token) {state.token = token}},actions: {//异步处理changeAsync(context, value) {setTimeout(() => {context.commit('settoken', value)}, 3000)}}
})export default store

pege组件代码:

<template><view class="content"><!-- <uni-fab /> --><!-- <text>{{$store.state.token}}</text> --><text @click="changeToken">{{token}}</text></view>
</template><script>import {mapState,mapMutations //倒入vuex中的mapMutations函数} from "vuex"export default {computed: {...mapState(["token"])},data() {return {}},methods: {//映射到页面中，直接调用settoken方法...mapMutations(['settoken']),changeToken() {// this.$store.commit('settoken', "abcdabcdabcd")// this.settoken("eeeeeeee")this.$store.dispatch('changeAsync', "1111ddd1111111")}}}
</script><style lang="scss">.content {background-color: aqua;}
</style>

第二种：使用mapActions，vuex对象同上，page页面中的用法，略有不同。
具体请看页面中的代码：

<template><view class="content"><!-- <uni-fab /> --><!-- <text>{{$store.state.token}}</text> --><text @click="changeToken">{{token}}</text></view>
</template><script>import {mapState,mapMutations,mapActions //倒入vuex中的mapActions函数} from "vuex"export default {computed: {...mapState(["token"])},data() {return {}},methods: {//映射到页面中，直接调用settoken方法...mapMutations(['settoken']),//vuex的changeAsync方法，映射到页面中，直接调用changeAsync方法...mapActions(['changeAsync']),changeToken() {// this.$store.commit('settoken', "abcdabcdabcd")// this.settoken("eeeeeeee")// this.$store.dispatch('changeAsync', "1111ddd1111111")//在此处直接调用即可。this.changeAsync("212112121112")}}}
</script><style lang="scss">.content {background-color: aqua;}
</style>

Vuex Actions使用相关推荐

使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作与通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
vuex ajax dev,vuex中使用ajax的话如何维护状态？
例如,我在初始化状态的时候,在action里面写了一个函数异步去获取初始化数据然后初始化vuex的状态,但是这样子的话我在组件里面就获取不了这个状态了,代码: actions export const ...
Vuex说明及Todos项目改造
Vuex(vue) / Flux (angular) /Redux(react) vuex 是什么? 状态管理工具状态即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具,采用 ...
vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
使用 Vuex + Vue.js 构建单页应用
原文地址:https://coligo.io/learn-vuex-by-building-notes-app/ 前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 ...
基于Vue,Vue-router,Vuex的简书网站模仿
在这个教程里面,我会通过一系列的代码和图片来学习怎么使用vue-router,以及vuex.本文假设读者手里有关于vue-router和Vuex的文档,并且对Vue-router和Vuex有一定的了解 ...
Vuex使用mapState
Vuex 学习 Vuex 全局配置 Vuex使用mapState Vuex Mutation vuex mapMutations使用 Vuex Actions使用全局使用Vuex 思路:创建好的vu ...
vuex getters、mapGetters、...mapGetters（三）
目录 getters 作用 getters 类似计算属性通过属性访问通过方法访问 mapGetters 辅助函数 getters 是将 state 中派生出的一些状态进行操作,如过滤列表中的元素, ...
使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

Vuex Actions使用

Vuex 学习

Vuex 全局配置

Vuex使用mapState

Vuex Mutation

vuex mapMutations使用

本章介绍Vuex Actions使用

Vuex Actions使用相关推荐

最新文章

热门文章