浅谈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 圆角div的实现代码
Oct 15 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
小程序实现投票进度条
2019/11/20 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Scrapy的简单使用教程
2017/10/24 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python实现抖音视频批量下载
2018/06/20 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Django封装交互接口代码
2020/07/12 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
设计师个人求职信范文
2014/02/02 职场文书
校园安全广播稿
2014/02/08 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
2015年推普周活动总结
2015/03/27 职场文书
校运会广播稿
2015/08/19 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python