关注公众号查看原文:

1. vueX介&绍安装

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

2. vueX  安装

npm install vuex --sa vuex --save

3. vueX使用

3.1 首先在src下面创建store文件

3.2在store文件下分别创建 actions.js、getters.js、index.js、mutations.js、state.js

3.3 我的实际页面逻辑页面是home.js,各位开发者可根据自己的实际业务逻辑页面使用vuex

3.3 在store文件下的index.js 里面引入 actions.js、getters.js、mutations.js、state.js ,代码如下:

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations' Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
}) export default store

3.4 在 mian.js 里面引入store文件 , 并且注入到VUE示例中

// mian.js
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store文件
import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
// 注入到vue实例中
store,
components: { App },
template: '<App/>'
})

4. state.js 中存放状态值 

// state.js
export default{
//定义变量,名字自定义
name:'小米',
number:10,
}

4.1 此时可以在实际业务页面取值,我的业务页面是home.js; 通过

this.$store.state.name 取出来值为 小米 ;

在我的业务页面是home.js 里面调用

// home.js
mounted() {
console.log("state.name",this.$store.state.name); // 小米
},

5. 在mutation.js里面修改值,你不能直接调用一个 mutation的函数,需要以相应的 type 调用 store.commit 方法;

// mutation.js
export default {
// 修改状态值
setname: (state, payload) => {
console.log("原始值:",state,"新值:",payload);
state.name = payload.name;
},
setNumber: (state, payload) => {
state.number = payload.number;
}
}

5.1 调用mutation.js 里面的方法,使用commit 同步修改值,修改小米为小米MAX

commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)

在我的业务页面是home.js 里面调用

commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)

修改值看步骤 5.1

// home.js
// 调用mutation.js 里面的setname修改name值为 '小米MAX'
this.$store.commit('setname', {
name: '小米MAX'
});

6. Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作;

修改值看6.1

// action.js
export default {
setnameAsync: (context, payload) => {
// 触发mutations里面的setname修改状态值;可以设置某段时间后在改变数
context.commit('setname', payload);
},
setnumberAsync: (context, payload) => {
// 触发mutations里面的setNumber修改状态值;可以设置某段时间后在改变数据
context.commit('setNumber', payload);
},
}

6.1  action.js 里面提交的值都是异步的,Action 通过 store.dispatch 方法触发;

dispatch:含有异步操作,写法:this.$store.dispatch(‘action方法名’,值)

// home.js
// 调用 action.js 里面的 setnumberAsync修改number值为 1000
this.$store.dispatch('setnumberAsync', {
number: 1000
});

mapState,mapMutations 辅助函数的使用方法:

7. 借助vueX提供的辅助函数 mapState,mapMutations 可以将state和mutations里面的属性名映射到vue实例中,通过this可以直接访问state、mutations里面的函数

7.1 在实际开发页面引入mapState,mapMutations , 我的是home.js

 

// home.js
// 1. 引入 mapState,mapMutations
import { mapState,mapMutations } from 'vuex'
// 2. 在 computed 里面把 state 属性值映射到VUE实例中
computed: {
...mapState(['name','number'])
}
// 3. methods 里把mutations里面的函数映射到VUE实例中

8. 完整代码:

// home.js
<template>
<div class="hello">
<h4>name:{{name}}</h4>
<h4>mumber:{{number}}</h4>
<button @click="hscht()">修改name的值</button>
<button @click="hschtAsync()">异步修改mumber的值</button>
</div>
</template> <script>
import { mapState,mapMutations } from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
/*
mapState,mapMutations注册后,不能有相同的name,number存在
*/
// name,
// number,
data:'',
}
},
mounted() {
this.data = this.$store.state;
// 取值
console.log("state.name",this.$store.state.name);
},
methods: {
// commit 和dispatch的区别在于commit是提交mutatious的同步操作,dispatch是分发actions的异步操作
hscht() {
// 同步改变数据
// commit:同步操作,写法:this.$store.commit(‘mutations方法名’,值)
this.setname({
name: '小米MAX'
});
},
hschtAsync() { // 异步改变数据
// dispatch:含有异步操作,例如向后台提交数据,写法:this.$store.dispatch(‘action方法名’,值)
this.$store.dispatch('setnumberAsync', {
number: 1000
});
},
...mapMutations(['setname','setNumber'])
},
// 利用mapState函数
computed: {
...mapState(['name','number'])
},
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

注意:

  1. commit 和dispatch的区别在于commit是提交mutatious的同步操作,dispatch是分发actions的异步操作

  2. 使用mapState,mapMutations 将state和mutations里面的属性名映射到vue实例中,在vue的data中不能和 mapState,mapMutations 中注入的属性名称相同

  3. 文档地址:https://vuex.vuejs.org/zh/

  

  

 

  

  

  

Vuex入门、同步异步存取值进阶版的更多相关文章

  1. Vuex入门、同步异步 存取值

    目的: 1.了解vuex中的各个js文件的用途 2.利用vuex存值 3.利用vuex取值 4.Vuex的异步同步加载问题 1. vuex中各个组件之间传值 1.父子组件 父组件-->子组件,通 ...

  2. Vuex的同步异步存值取值

    1. vue中各个组件之间传值 1.父子组件 父组件-->子组件,通过子组件的自定义属性:props 子组件-->父组件,通过自定义事件:this.$emit('事件名',参数1,参数2, ...

  3. Flask入门的第一个项目进阶版

    前言: 此次版本增加[一对多]数据库关系和动态路由设置. 一.数据库设计 environments表与variable1表的关系为:一对多.variable1.env_id设置为外键,与environ ...

  4. .Net Core WebAPI 基于Task的同步&异步编程快速入门

    .Net Core WebAPI 基于Task的同步&异步编程快速入门 Task.Result async & await 总结 并行任务(Task)以及基于Task的异步编程(asy ...

  5. 05慕课网《进击Node.js基础(一)》HTTP概念进阶(同步/异步)

    HTTP模块介绍 支持http协议的更多特性 不缓存请求和响应 API比较底层处理流相关,信息解析 HTTP相关概念 回调 将函数作为参数传到执行函数中,参数函数在执行函数中嵌套执行 function ...

  6. 02 . Go框架之Gin框架从入门到熟悉(数据解析和绑定,渲染,重定向,同步异步,中间件)

    数据解析和绑定 json数据解析和绑定 package main import ( "github.com/gin-gonic/gin" "net/http" ...

  7. [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库

    此为文章备份,原文出处(我的网站)  [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库 http://www.dotblogs.com.tw ...

  8. 同步异步,阻塞非阻塞 和nginx的IO模型

    同步与异步 同步和异步关注的是消息通信机制 (synchronous communication/ asynchronous communication).所谓同步,就是在发出一个*调用*时,在没有得 ...

  9. 008. 阻塞&非阻塞、同步&异步

    阻塞 非阻塞:关注的对象是调用者: 阻塞:调用者发起调用后,处于等待状态,直到该调用有返回: 非阻塞:调用者发起调用后,不需要等待返回,可以往下执行: 同步 异步:  关注的对象是被调用者: 同步:服 ...

随机推荐

  1. Flink-v1.12官方网站翻译-P004-Flink Operations Playground

    Flink操作训练场 在各种环境中部署和操作Apache Flink的方法有很多.无论这种多样性如何,Flink集群的基本构件保持不变,类似的操作原则也适用. 在这个操场上,你将学习如何管理和运行Fl ...

  2. 博弈论入门——Nim游戏引入

    说实话,我真的对这个游戏看得是一脸懵逼,因为(我太弱了)我没有明白一些变量的意思,所以一直很懵,现在才明白,这让我明白博弈论(还可以骗钱)博大精深; 以下是我自己思考的过程,也许不严谨,但是最终明白了 ...

  3. 洛谷P3796

    题目链接  题意:有n个由小写字母组成的模式串以及一个文本串T.每个模式串可能会在文本串中出现多次.哪些模式串在文本串T中出现的次数最多. 题解:ac自动机模板加强版,开一个数组单独记录各个字符串出现 ...

  4. 10.PowerShell DSC之细节

    mof文件到各Node放在哪里了? 在C:\Windows\System32\Configurtion文件夹下: 你可能会注意到mof的文件名称和Pull Server上的不一致,并且多出了几个.不用 ...

  5. ucosIII学习笔记——钩子函数

    一开始听见钩子函数感觉很莫名其妙,更不知道它有何作用,这是第一篇博客,也是学习ucosIII操作系统的一个开始吧. 在系统中有开发者自己创建的任务也有系统内部任务 ,UCOSIII中有五个系统任务,分 ...

  6. 【论文笔记】AutoML for MCA on Mobile Devices——论文解读与代码解析

    理论部分 方法介绍 本节将详细介绍AMC的算法流程.AMC旨在自动地找出每层的冗余参数. AMC训练一个强化学习的策略,对每个卷积层会给出其action(即压缩率),然后根据压缩率进行裁枝.裁枝后,A ...

  7. 交换机上禁止某个MAC地址通信

    当分析出网络中某台机器中毒时而有不知道它的具体位置,我们可以通过获取其MAC地址然后在交换机上禁止其MAC来达到隔离它的效果.通过ARP表查询IP地址对应的MAC地址,再将该MAC地址加入黑名单过滤. ...

  8. python to exe

    使用pyinstaller 打包 文件结构如下 命令行cd 进入 project文件夹 ,然后 命令 pyinstaller -F main.py 即可打包文件为一个完整的exe.(不含DLL等)

  9. cookie,session,token之间的联系与区别

    发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应,  尤其是我不用 ...

  10. P2P协议初步

    今天看到一个问题,如何把一个文件快速下发到100w个服务器 如果我们将文件集中式地放在一个服务器或缓存上的话,带宽.连接都会遇到问题. 树状:        1. 每个服务器既具有文件存储能力也应具有 ...