浅谈vuex的基本用法和mapaction传值问题
作者:请不要让我脱发 发布时间:2024-06-05 09:18:21
标签:vuex,mapaction,传值
vuex的理论知识就不多提了,官网上已经有明确的讲解。
用一个简单的例子来描述一下基本的用法:
第一步:npm install vuex –save-dev
第二步:在目录中创建store目录配置管理状态
//store/index.js
/**
* Created by zhaohuan on 2017/7/13.
*/
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
msg: '原始数据'
},
actions: {
fun: function ({commit},date) {
commit('saveAdminInfo', {list: date});
},
},
mutations: {
saveAdminInfo(state, adminInfo){
state.msg = adminInfo.list;
}
}
});
export default store;
第三步:在main.js中引入store
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
});
第四部:编写路由页面
//test1.vue
<template>
<div>
msg:{{msg}}
<input type="text" v-model="checkedNames" style="border: 1px solid red">
<button @click="fun">提交</button>
</div>
</template>
<script>
import {mapState,mapActions} from 'vuex';
export default{
data(){
return{
checkedNames:''
}
} ,
computed: {...mapState(['msg'])},
methods: {
// ...mapActions(['fun']);
//如果需要向actions里面传值就手动调用
fun(){
this.$store.dispatch('fun',this.checkedNames);
}
//...mapActions(['fun'])== this.$store.dispatch('fun');
}
}
</script>
test2.vue
<template>
<div>
msg:{{msg}}
</div>
</template>
<script>
import {mapState} from 'vuex';
export default{
computed: {...mapState(['msg'])}, //对应getters.技术中的msg
// methods: {...mapActions(['fun'])}
}
</script>
修改之前:
test1
test2
来源:https://blog.csdn.net/yangyiboshigou/article/details/75062739
0
投稿
猜你喜欢
- 如下所示:var table_name = table.render({});page_size = table_name.config.l
- 假设我们有以下虚拟函数:import sysdef writeline(text, stream=sys.stdout): stream.w
- 设法让用户happy吧~只要你的设计让用户乐了,产品的个性就得到了一次彰显,而用户对网站的情感就会获得一次升华,看看下面的知名网站的人性化设
- 大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂
- 1.定时器Timer定时器源码实现,和自定义一个线程方式一样,都是继承Thread类,重写了run()方法,只是实现的功能是延时执行一个函数
- Python内建的filter()函数用于过滤序列。和map()类似,filter()也接收一个函数和一个序列。和map()不同的时,fil
- 某些时候我们需要让类动态的添加属性或方法,比如我们在做插件时就可以采用这种方法。用一个配置文件指定需要加载的模块,可以根据业务扩展任意加入需
- 1. 首先是环境的安装 (本人使用的是PyCharm,python3.6)pip3 install PyQt5 (没有指定版本的话,默认会安
- 本文实例讲述了Python实现爬取马云的微博功能。分享给大家供大家参考,具体如下:分析请求我们打开 Ajax 的 XHR 过滤器,然后一直滑
- 原生实现jQuery的sibling方法<body><span>我是span标签</span><d
- 由于个人能力有限,文章中难免会出现错误或遗漏的地方,敬请谅解!同时欢迎你指出,以便我能及时修改,以免误导下一个看官。最后希望本文能给你带来一
- 1. 定义用一行构建代码例题# 构建一个1-100的列表l1 = [i for i in range(1,101)]print(l1)# 输
- 这次我使用ADO.NET来插入一条数据,到数据库中。主用到存储过程。我不想每次都是用SQL文本的形式了,那样始终没有进步~~~下面首先,我把
- 前言最近在用yolov5参加比赛,yolov5的技巧很多,仅仅用来参加比赛,着实有点浪费,所以有必要好好学习一番,在认真学习之前,首先向yo
- 前言有时,我们希望判断文本框中用户输入的字符是否含有特殊符号(*/#$@),就像用户注册时密码框的填写。demo利用 RegExp 对象,能
- logrus是go的一个日志框架,它最让人激动的应该是hook机制,可以在初始化时为logrus添加hook,logrus可以实现各种扩展功
- 一、身份验证配置在sqlserver服务端电脑打开SqlServer Managerment Studio管理工具,首先通过Windows身
- 前言:今天和大家分享自己总结的6个常用的Pandas数据处理代码,对于经常处理数据的coder最好熟练掌握。选取有空值的行在观察数据结构时,
- 代码使用说明1970-2270文件夹是保存图像和json文件(也就是需要进行转换的文件)det文件夹是保存单个json对应的txt(因为np
- 需求:公司的数据分析师,提交一个sql, 一般都三四百行。由于数据安全的需要,不能开放所有的数据库和数据表给数据分析师查询,所以需要解析sq