精华内容
下载资源
问答
  • vue中多个组件之间数据同步vuex

    千次阅读 2018-12-20 17:35:44
    最经典的比如像购物车这种在项目中多个位置的引用时就会变得很麻烦,例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个...

    在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据、用户的登录状态等。最经典的比如像购物车这种在项目中多个位置的引用时就会变得很麻烦,例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,这样就会变得很麻烦。而vuex就可以帮助我们解决这个繁琐的问题。

    页面结构如下:

    如果之前没有安装 vuex,使用下面的命令安装

    npm install vuex --save

    在项目根目录下新建 store/store.js 文件,这个文件中保存的就是这个应用中需要共享的内容, 而且整个应用中只有一个。

    在 main.js 文件中

    第一步要引入在main.js中引入 vuex,

    第二步注册vuex组件(当然我根据自己的需要来引用滴)

    第三步实例化Store

      state:保存的是原始数据,可以理解为需要共享的数据或状态,

      getters:可以理解为是staore的计算属性,可以实现就store的计算,但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。

      mutations:mutations中的方法可以对state中的数据进行改变。

      action:action中的方法可以调用mutations中的方法,但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法,例如通过context.commit('increment', price)increment是需要调用mutations中的方法名,price是需要传入的参数。 mutations中的方法再去更改state的原始数据。

    代码实例
    在index.js中,保存需要的数据

    如何在组件中获得state数据?

      在组件内部使用 this.$store.state.属性名即可。

    computed: {
       statusIssue () {
         return this.$store.state.notApproveStatus
       }

    如何在组件中使用getters内的方法?

    computed: {
       getStatus () {
         return this.$store.getters.statusFilter
       }

    接着是在action里进行异步请求:

    代码片段

    changeStatus ({commit}) {
        listIsvUsingGET({ndaStatus: 0}).then(response => {
          let {data} = response.data
          commit('SET_Status', data.total)
        })
      }

    mutations.js 文件

    代码片段

    SET_Status (state, data) {
        state.notApproveStatus = data
      }

    如何在组件中使用mutations内的方法?

    layout2.vue

    isvmanege.vue

    代码片段

    getNotApprove(){
          listIsvUsingGET({ndaStatus:0}).then(response =>{
            let {data} = response.data
            this.$store.commit('SET_Status', data.total)
          })
        }

    当第一个组件改变数据的时候,第二个组件也发生了数据改变

    第二种也可以store.dispatch

     

    1.  

      // action.js 文件
      increment(context, m) {
      	setTimeout(() => {
      	 context.commit({
      		type: "increment",
      		amout: m.amout
      		})
      	}, 1000)
      }
      
      // 组件中
      <template>
      	<div id="app">
      		<button @click="handleClick">点击调用dispatch</button>
      	</div>
      </template>
      
      
      <script>
      export default {
        name: 'app',
        data() {},
        methods: {
           handleClick(){
               this.$store.dispatch({
      	           type: "increment",
      	           amout: 180
               });
            }
      	}
      }
      </script>
      

       

    展开全文
  • http://pan.baidu.com/s/1hrJfpli demo下载地址 前言  在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据、用户的...例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改...

    http://pan.baidu.com/s/1hrJfpli  demo下载地址

    前言

      在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数,子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,这样就会变得很麻烦。而vue-v就可以帮助我们解决这个繁琐的问题。

    npm安装

      npm install vuex 

    开始使用

      项目需求:实现购物车商品增加和减少,并计算出商品的总价。

      目录结构

     

      准备工作

      第一步要引入在main.js中引入 vuex

    import Vuex from 'vuex'

      第二步注册vuex组件

    Vue.use(Vuex)

      第三步实例化Store

      state:保存的是原始数据,可以理解为需要共享的数据或状态,

      getters:可以理解为是staore的计算属性,可以实现就store的计算,但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。

      mutations:mutations中的方法可以对state中的数据进行改变。

      action:action中的方法可以调用mutations中的方法,但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法,例如通过context.commit('increment', price)increment是需要调用mutations中的方法名,price是需要传入的参数。 mutations中的方法再去更改state的原始数据。

       代码示例

    let store = new Vuex.Store({
    
      state: {
        totalPrice: 0
      },
    
      getters: {
        getTotal (state) {
          return state.totalPrice*2
        }
      },
    
      mutations: {
        increment (state, price) {
          state.totalPrice += price
        },
        decrement (state, price) {
          state.totalPrice -= price
        }
      },
    
      actions: {
        increase (context, price) {
          context.commit('increment', price)
        }
      }
    })

      如何在组件中获得state数据?

      在组件内部使用 this.$store.state.属性名即可。

      实例代码:

    computed: {
       totalPrice () {
         return this.$store.state.totalPrice
       }
    }

     如何在组件中使用getters内的方法?

    computed: {  
        getTotal () {    
            return this.$store.getters.getTotal  
        }
    }

     如何在组件中使用mutations内的方法?

    methods: {
         addOne () {
           this.$store.commit('increment', this.price)
         },
         minusOne () {
           this.$store.commit('decrement', this.price)
         }
       }

        如何在组件中使用actions内的方法?

    methods: {
         addOne () {
           this.$store.dispatch('increase', this.price)
         }
       }

    转载地址:https://www.cnblogs.com/waitforyou/p/6784838.html

    展开全文
  • 前言 在一些项目中有很多数据状态之间要实现...例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变...

    前言

      在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数,子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,这样就会变得很麻烦。而vue-v就可以帮助我们解决这个繁琐的问题。

    npm安装

      npm install vuex 

    开始使用

      项目需求:实现购物车商品增加和减少,并计算出商品的总价。

    准备工作

      第一步要引入在main.js中引入 vuex

    import Vuex from 'vuex'

      第二步注册vuex组件

    Vue.use(Vuex)

      第三步实例化Store

      state:保存的是原始数据,可以理解为需要共享的数据或状态,

      getters:可以理解为是staore的计算属性,可以实现就store的计算,但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。

      mutations:mutations中的方法可以对state中的数据进行改变。

      action:action中的方法可以调用mutations中的方法,但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法,例如通过context.commit('increment', price)increment是需要调用mutations中的方法名,price是需要传入的参数。 mutations中的方法再去更改state的原始数据。

       代码示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    let  store =  new  Vuex.Store({
       state: {
         totalPrice: 0
       },
       getters: {
         getTotal (state) {
           return  state.totalPrice*2
         }
       },
       mutations: {
         increment (state, price) {
           state.totalPrice += price
         },
         decrement (state, price) {
           state.totalPrice -= price
         }
       },
       actions: {
         increase (context, price) {
           context.commit( 'increment' , price)
         }
       }
    })

      如何在组件中获得state数据?

      在组件内部使用 this.$store.state.属性名即可。

      实例代码:

    1
    2
    3
    4
    computed: {
        totalPrice () {
          return  this .$store.state.totalPrice
        }

      如何在组件中使用getters内的方法?

    1
    2
    3
    4
    5
    computed: {
       getTotal () {
         return  this .$store.getters.getTotal
       }
    }

      如何在组件中使用mutations内的方法?

    1
    2
    3
    4
    5
    6
    7
    8
    methods: {
          addOne () {
            this .$store.commit( 'increment' this .price)
          },
          minusOne () {
            this .$store.commit( 'decrement' this .price)
          }
        }

      如何在组件中使用actions内的方法?

    1
    2
    3
    4
    5
    methods: {
          addOne () {
            this .$store.dispatch( 'increase' this .price)
          }
        }
    转载自:https://www.cnblogs.com/waitforyou/p/6784838.html

    http://pan.baidu.com/s/1hrJfpli  demo下载地址

    展开全文
  • vue父组件向子组件传递多个数据

    万次阅读 2017-06-27 18:28:01
    在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这时候,我们通常会有很的办法,这里主要分为两种情况:第种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串...

    在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:

    第一种:静态数据传递:传递一个 字符串
    第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去


    这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。

    但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办?


    这里就通过一个例子来说明一下:

    子组件的JS

    /**
     *  收货地址组件  马优晨
     **/
    define(function(require, exports, module){
        var $ = require("lib_cmd/zepto-cmd"),
            Vue = require('lib_cmd/vue-cmd'),
            main = require("js_cmd/main-cmd"),
        var vm= Vue.component('myaddress', {
            template: '\
            <div data-role="data-widget" data-widget="address-editor" class="address_mask" id="address-editor">\
            </div>',
            props:["address","ids"],
            methods: {
            },
            created: function () {
            }
        });
        module.export= vm;
    })
    /*注册名为“myaddress”的组件 ,从父组件传递过来两个数据"address","ids"*/
    

    父组件EJS页面

    <%- include ../../header %>
    <link href="/css/vd/activity/myAward.css?v=<%= config.version %>" rel="stylesheet" />
    
    <div data-role="container" class="body <%= pageName %>" id="myAward">
        <myaddress :address="editAddr" :ids="ids"></myaddress>
    </div>
    
        <script>
            seajs.use('js_cmd/vd/activity/myAward-cmd');
        </script>
    <%- include ../../footer %>
    
    /*在定义的组件 “myaddress”中绑定两个父组件的数据 "editAddr" "ids"*/
    

    父组件的JS页面

    /**
     * Created by youchen.ma on 2017/6/21.
     */
    define(function (require, exports, module) {
        var $ = require("lib_cmd/zepto-cmd"),
            Vue = require("lib_cmd/vue-cmd"),
            main = require("js_cmd/main-cmd"),
            Address = require('js_cmd/vd/venue/widget/venueEditAddress-cmd')  //引入子组件的JS文件
    
            var vm = new Vue({
            el: '#myAward',
            data:{   
                editAddr:{},       
                ids:""             
                }
            })
    })
    
    展开全文
  • 下面小编就为大家分享篇vue父组件向子组件传递多个数据的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 问题背景:我使用的是腾讯地图;根据需要封装了个...图三:我又定义了一个组件叫electronicTable,在这个组件里,我引入了上边定义的qqMap组件 图四:在touristQuery组件里我分别引入了 electronicTable(ele...
  • 组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),所以会导致下面的问题: var obj = {a:10}; var obj2 = obj; ...
  • 例如 多个页面引用树结构 当页面修改树结构默认值时 离开的页面选择的树的数据会被修改 查看很久 发现不管当前路由是否为active 都会被修改 解决办法:将树组件中的mounted和watch改为activated activated():在vue...
  • swiper在同一个页面使用多个轮播组件
  • 是本次的重点,如果不同实例,那么操作的就不是同一数据,那么就不会有这样的效果,想实现共用服务实例,就是在所有父组件中priviates:[]中引入这个组件,子组件中不需要再次引入,那么他们都是的父组件中的服务...
  • OFFICE连接Excel数据源提示此链接需要安装个或多个其他组件才能使用我的环境问题出现?我的解决方案策略直接最快解决策略 我的环境 Win10系统 Excel2016 问题出现? 在使用excel2016连接Mysql数据库时,出现个...
  • 有三个组件,分别是app、list、comment三个组件之间的关系是comment在list中使用,list在app中使用此时有数据需要从list传到comment,然后comment传回list,list又将comment传回的数据传给app代码如下:comment:...
  • 多个页面共用同一个组件多个路由公用同一个组件时,切换路由不会重新触发该组件页面的钩子函数。 为了重新触发钩子函数。获取最新数据。有两种方式: 方法1:假如父组件下的两个子组件A ,B需要公用同一个组件,在...
  • 在做项目的过程中,有这么个场景:多个组件通过配置路由,都跳转到同一个组件,他们之间的区别就是,传入的参数不同.请看router对象: userCenterLike: { name: 'user-center', params: { index: 0...
  • export function getData(callback){ let opt = { method : 'get', url: '/user', success: res => { callback(res.data.value || []) }, fail:err =&...
  • 组件: &lt;template&gt; &lt;div&gt; &lt;div id="myChart" :style="echartStyle"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; ...
  • 解决方案:个页面拆分成多个页面实现 注意事项: 1、父组件引入的子组件要有ref属性,并传入父组件v-model绑定form数据(目的整合所有子组件的form数据) 2、子组件通过props接收父组件传来的数据,watch监听父组件...
  • 次调用数据会发生覆盖 <divid="cate"></div> this.cake = echarts.init(document.getElementById("cate")); 正确封装 <divid="cate"ref="ref_cate"></div> this.cate=this.$...
  • ``` ``` 这是页面的这个组件,传值data不一样 ![图片说明]...我同一页面使用多个传不同的值,他显示的永远是最后数据源,有没有详细的代码???
  • 有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件。 甚至有时候,我们想要实现绑定多个 “v-model”,也就是多个“双向绑定”,例如带表单输入的模块框,想同时控制...
  • this.treeList= []这是树的数据 this.treeList1 = this.treeList; this.treeList2 = this.treeList; 我给他俩同时赋值导致状态一样的问题 在来一张图我解决好的: 我解决好的,上代码 this.treeLis...
  • VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值 VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值 在开发中碰到的问题, 赶紧记下来,记性没的说。。。。。 在开发中 常常碰到同一个组件内, 获取...
  • 1、子组件里面的数据 2、父组件里面的data里面的数据
  • 1.定义子组件,在失去焦点的时候,向父组件发送数据 2.在父组件中监听 ‘inputChanged’ 事件并作出反应 ...3.在这地方,因为我们接收的是一个多数据,就采用了这arguments方法 4.完成数据的切换。 ...
  • 目录 子组件向父组件中传递数据 .... 通过sync实现数据双向绑定, 从而同步父子组件数据 数据双向绑定是把双刃剑 当sync修饰的prop是对象 不要通过在子组件中修改引用类型props达到“父...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,075,815
精华内容 430,326
关键字:

多个组件用同一个数据