浅谈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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP 命名空间实例说明
2011/01/27 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
Python的时间模块datetime详解
2017/04/17 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python实现直播推流效果
2019/11/26 Python
Python request使用方法及问题总结
2020/04/26 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
会计自荐书
2013/12/02 职场文书
学校文明单位申报材料
2014/05/06 职场文书
年终考核实施方案
2014/05/26 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
明星员工获奖感言
2014/08/14 职场文书
学校食品安全责任书
2015/01/29 职场文书
卫生主题班会
2015/08/14 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS