浅谈vuex的基本用法和mapaction传值问题
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
vuex的理论知识就不多提了,官网上已经有明确的讲解。
用一个简单的例子来描述一下基本的用法:
第一步:npm install vuex –save-dev
第二步:在目录中创建store目录配置管理状态
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | //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
第四部:编写路由页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //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
1 2 3 4 5 6 7 8 9 10 11 12 13 | <template> <div> msg:{{msg}} </div> </template> <script> import {mapState} from 'vuex' ; export default { computed: {...mapState([ 'msg' ])}, //对应getters.技术中的msg // methods: {...mapActions(['fun'])} } </script> |
修改之前:
test1
test2
以上这篇浅谈vuex的基本用法和mapaction传值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue webpack build资源相对路径的问题及解决方法
这篇文章主要介绍了vue webpack build资源相对路径的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06element修改form的el-input宽度,el-select宽度的方法实现
有时候像form表单这样,页面的input、select等宽度不一定会是一样的,可能有些长,有些短,本文就介绍了如何element修改form的el-input宽度,el-select宽度的方法实现,感兴趣的可以了解一下2022-02-02
最新评论