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

赞 (0)

相关推荐

  • 浅谈vuex之mutation和action的基本使用

    浅谈vuex之mutation和action的基本使用

    我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1 一.mutation 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,c

  • 详解关于Vuex的action传入多个参数的问题

    问题: 已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成 然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数 一开始遇到的问题是加入购物车方法中要传入一个字典对象里面保存产品信息item,还要传入一个产品数量的参数num 然而如果这么写的话就会报错:context.commit(mutations,item,num) 解决办法: 将第二个参数以对象的放式提交就像这样 mu

  • 浅谈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.St

  • 浅谈vuex中store的命名空间

    为了防止store变的过于臃肿,我们可以为store注册模块,模块默认是属于全局命名空间的,也就是说当用下列代码分发action时,任意模块只要action中有addNews,就会得到执行 this.$store.dispatch('addNews') 有时候这种情况会不是我们想要的,为此我们可以为模块指定命名空间,相当于把它封装起来,这样在像上面那样分发action,具有命名空间的模块中的addNews函数就不会执行 当然你也可以指定位于特定的命名空间中的模块执行addNews这个函数,方法如

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • 浅谈js中的引用和复制(传值和传址)

    好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么 引用:对象.数组.函数 复制:数字.布尔 字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较(稍后具体说比较的事) 下面讲一下在使用中的具体体现 最普通的使用就是赋值了 var a = 1; var b = a; //赋的是a的复制值 b ++; aler

  • 浅谈Vuex的状态管理(全家桶)

    浅谈Vuex的状态管理(全家桶)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • 浅谈Vuex@2.3.0 中的 state 支持函数申明

    vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores) 假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如: import ap

  • 浅谈vuex 闲置状态重置方案

    前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题.这种应用少则几十个单页,多则上百个单页.随着路由的频繁切换,每个路由对应的 vuex 中的状态将越来越多.为了做到页面的极致优化,我们需要将那些闲置的状态重置,以减小占用的内存空间. 什么状态可以重置 vuex 强调采用集中式存储管理应用的所有组件的状态,但是我们真把所有的状态都放到 store 中去处理,你会发现开发起来非常痛苦.这里如果想很好的把控哪些数据需要放到 store

  • 浅谈vuex actions和mutation的异曲同工

    vuex说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 包含的内容: state:驱动应用的数据源: view:以生命方式将state映射到视图: actions:响应在view上的用户输入导致的状态变化: 流程示意图 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 对于问题一,传参的方法

  • 浅谈Vuex注入Vue生命周期的过程

    这篇文章是[前端词典]系列文章的第 13 篇文章,接下的 9 篇我会围绕着 Vue 展开,希望这 9 篇文章可以使大家加深对 Vue 的了解.当然这些文章的前提是默认你对 Vue 有一定的基础.如果一点基础都没有,建议先看官方文档. 第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会复杂很多. 为何使用 Vuex 使用 Vue 我们就不可避免的会遇

随机推荐