zoukankan      html  css  js  c++  java
  • vuex的数据交互

    methods:{
    ...mapMutations({aaa:hs}) //将mutations的方法暴露出来,进行调用 aaa是他的名字
    
    ...mapActions(['hs']) //将actions的方法暴露出来,进行调用 
    hss(){
     this.$store.commit('hs') //通过某个方法让它 提交
    }
    
    hss2(){
     this.$store.dispatch('hs') //通过某个方法让它 提交 actions里
    }
    }
    
    mounted(){
      this.$store.commit('hs') //可以在这里去调取数据 
      this.$store.dispatch('hs') //通过某个方法让它 提交 actions里
    }
    
    computed:{
    ...mapGetters(['hs']) //将Getters返回的方法内的数据暴露出来,进行调用
    ...mapState(['count']) //将State的数据暴露出来,进行调用
    }
    
     computed: mapState({
            //使用箭头函数
            count: state => state.count,
            //传入字符串 ‘count’ 等同于 `state => state.count`
            count1: 'count',
            // 为了能够使用 `this` 获取局部状态,必须使用常规函数
            count2(state) {
                return state.count + this.id
            }
        })
    
    getters: {
      // ...
      getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }
    getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    
    store.commit('increment', {
      amount: 10
    }) //将数据提交到 mutations里面并且 传了一个参数payload.amount
    
     actions: {
        increment (context) {
          context.commit('increment')
        }
    }
    actions: {
      increment ({ commit }) {
        commit('increment')
      }
    }
    
    actions: {
      actionA ({ commit }) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            commit('someMutation')
            resolve()
          }, 1000)
        })
      }
    }
    现在你可以这样做:
    
    store.dispatch('actionA').then(() => {
      // 将actionA 提交到 actions里 并且 将actionA 返回的Promise对象接收并输出
    }) 
    
    actions: {
    //被提交到actionB 将actionA 提交到 actions里 并且 将actionA 返回的Promise对象接收并输出
      actionB ({ dispatch, commit }) {
        return dispatch('actionA').then(() => {
          commit('someOtherMutation')
        })
      }
    }
  • 相关阅读:
    使用.Net Core+IView+Vue集成上传图片功能
    Vue基于vue-quill-editor富文本编辑器使用心得
    Fiddler原理~知多少?
    ASP.NET Core WebApi中简单像素转换跟踪实现
    利用SQL Profiler 追踪数据库操作
    ASP.NET Core Web API 版本控制
    处理SQL Server中的重复行
    【3分钟就会系列】使用Ocelot+Consul搭建微服务吧!
    ASP.NET Core WebAPI控制器返回类型的最佳选项
    花10分钟搞懂开源框架吧
  • 原文地址:https://www.cnblogs.com/l8l8/p/9185166.html
Copyright © 2011-2022 走看看