浅谈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传值问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element el-select下拉框选择失效解决办法

    element el-select下拉框选择失效解决办法

    el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下
    2023-08-08
  • Vue子父组件之间传值的三种方法示例

    Vue子父组件之间传值的三种方法示例

    Vue的组件化给前端开发带来极大的便利,下面这篇文章主要给大家介绍了关于Vue子父组件之间传值的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • uniapp 获取系统信息的方法小结

    uniapp 获取系统信息的方法小结

    uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息,系统信息返回的内容非常多,各操作系统、各家小程序、各浏览器对它们的定义也不相同
    2022-11-11
  • vue3 使用 vue3-video-play实现在线视频播放

    vue3 使用 vue3-video-play实现在线视频播放

    这篇文章主要介绍了vue3 使用 vue3-video-play 进行在线视频播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue3+TypeScript+vue-router的使用方法

    vue3+TypeScript+vue-router的使用方法

    本文详细讲解了vue3+TypeScript+vue-router的使用方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • vue报错Error:Cannot find module 'fs/promises'的解决方式

    vue报错Error:Cannot find module 'fs/promises'的解决方

    最近的项目需要用到vue/cli,但是用cnpm安装vue/cli的时候报错了,下面这篇文章主要给大家介绍了关于vue报错Error:Cannot find module 'fs/promises'的解决方式,需要的朋友可以参考下
    2022-11-11
  • Vuex中State的使用方法

    Vuex中State的使用方法

    这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下
    2023-11-11
  • 解决Element中el-date-picker组件不回填的情况

    解决Element中el-date-picker组件不回填的情况

    这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • antd Vue实现Login登录页面布局案例详解 附带验证码验证功能

    antd Vue实现Login登录页面布局案例详解 附带验证码验证功能

    这篇文章主要介绍了antd Vue实现Login登录页面布局案例详解附带验证码验证功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-05-05
  • vue3组合式api实现v-lazy图片懒加载的方法实例

    vue3组合式api实现v-lazy图片懒加载的方法实例

    vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于vue3组合式api实现v-lazy图片懒加载的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论