浅谈vuex的基本用法和mapaction传值问题


Posted in Javascript onNovember 08, 2019

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

浅谈vuex的基本用法和mapaction传值问题

test2

浅谈vuex的基本用法和mapaction传值问题

以上这篇浅谈vuex的基本用法和mapaction传值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
Highcharts学习之数据列
Aug 03 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
微信小程序select下拉框实现源码
Nov 08 #Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 #Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
在vue中使用vuex,修改state的值示例
Nov 08 #Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 #Javascript
You might like
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP使用递归生成文章树
2015/04/21 PHP
教大家制作简单的php日历
2015/11/17 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
javascript折半查找详解
2015/01/26 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python实现微信小程序支付功能
2019/07/25 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
实习单位鉴定评语
2014/04/26 职场文书
语文课外活动总结
2014/08/27 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
初中物理教学反思
2016/02/19 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
详解CocosCreator项目结构机制
2021/04/14 Javascript