• 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')
        })
      }
    }
  • 相关阅读:
    IDEA 编译时 未结束的字符串文字
    JAVA文件下载,页面显示另存为效果
    no matching key exchange method found. Their offer: diffie-hellman-group1-sha1
    【转】修改LINUX时间
    【转】tomcat7性能调优
    【转】Nginx中upstream有以下几种方式:
    【转】tomcat性能调优
    【转】Memcached安装
    【转】 linux下的g++编译器安装
    【转】nginx+tomcat+memcached (msm)实现 session同步复制
  • 原文地址:https://www.cnblogs.com/l8l8/p/9185166.html
Copyright © 2020-2023  润新知