浅谈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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js分页代码分享
Apr 28 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
openlayers实现地图测距测面
Sep 25 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
JS实现复制功能
2017/03/01 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
基于node.js实现微信支付退款功能
2017/12/19 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
Python程序设计入门(4)模块和包
2014/06/16 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
秦兵马俑教学反思
2014/02/07 职场文书
计算机毕业生求职信
2014/06/10 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
第一书记观后感
2015/06/08 职场文书
学生会招新宣传语
2015/07/13 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
vscode内网访问服务器的方法
2022/06/28 Servers