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

 更新时间:2019年11月08日 10:41:13   作者:请不要让我脱发  
今天小编就为大家分享一篇浅谈vuex的基本用法和mapaction传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

test2

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

相关文章

  • vue3的watch用法以及和vue2中watch的区别

    vue3的watch用法以及和vue2中watch的区别

    这篇文章主要介绍了vue3的watch用法以及和vue2中watch的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue webpack build资源相对路径的问题及解决方法

    vue webpack build资源相对路径的问题及解决方法

    这篇文章主要介绍了vue webpack build资源相对路径的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • vue商城中商品“筛选器”功能的实现代码

    vue商城中商品“筛选器”功能的实现代码

    这篇文章主要介绍了vue商城中商品“筛选器”功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue3中使用viewerjs实现图片预览效果的项目实践

    vue3中使用viewerjs实现图片预览效果的项目实践

    viewer.js是一款开源的图片预览插件,功能十分强大,本文主要介绍了vue3中使用viewerjs实现图片预览效果的项目实践,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 关于Ant-Design-Vue快速上手指南+排坑

    关于Ant-Design-Vue快速上手指南+排坑

    这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

    今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • element修改form的el-input宽度,el-select宽度的方法实现

    element修改form的el-input宽度,el-select宽度的方法实现

    有时候像form表单这样,页面的input、select等宽度不一定会是一样的,可能有些长,有些短,本文就介绍了如何element修改form的el-input宽度,el-select宽度的方法实现,感兴趣的可以了解一下
    2022-02-02
  • vue项目中引入Sass实例方法

    vue项目中引入Sass实例方法

    在本文里小编给大家整理的是关于vue项目中引入Sass的相关知识点内容,有需要的朋友们可以测试参考下。
    2019-08-08
  • vue实现分页加载效果

    vue实现分页加载效果

    这篇文章主要为大家详细介绍了vue实现分页加载效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue配置nprogress实现页面顶部进度条

    vue配置nprogress实现页面顶部进度条

    这篇文章主要为大家详细介绍了vue配置nprogress实现页面顶部进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论