zoukankan      html  css  js  c++  java
  • VUX

    1.mapState

     2.mapGetters

     3.

    4.

     当你的操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成。
    其他使用commit即可。

    举个例子:

    const store = new Vuex.Store({
      state: {
        count: 10,
        numb: 10086
      },
      getters: {
        add: (state) => {
          return state.count;
        },
      },
      mutations: {
        increment(state,val) {
          if(val){
            state.count += val;
          }else{
            state.count += 2;
          }
    
        },
      },
      actions: {
        actionA({dispatch, commit}) {
          return commit('add');
        },
        increment({commit}) {
          return commit('increment')
        }
      }
    });
    
    
    /* eslint-disable no-new */
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app-box')
    

    使用:

    import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
    
     methods:{
        ...mapMutations({addNumber:'increment'}),
        increment(){
          this.$store.dispatch('increment');
        }
      },
      computed: {
        ...mapState({count:'numb'}),
        ...mapGetters(['add'])
      },
    
     <div class="hello">
          <button @click="increment">加+2{{count}}</button>
        </div>
        <div class="hello">
          <button @click="addNumber(5)">加+5{{count}}</button>
        </div>
        <div class="hello">
          <button >{{add}}</button>
        </div>

    点击+2:store的count+=2

    点击+5:store的count+=5

    ...mapState({count:'numb'}),
    意思是this.count=this.$store.state.numb

    ...mapMutations({addNumber:'increment'}),
    意思是之行this的addNumber函数的时候,执行this.$store的mutations的increment的函数

  • 相关阅读:
    LeetCode 297. 二叉树的序列化与反序列化
    LeetCode 14. 最长公共前缀
    LeetCode 1300. 转变数组后最接近目标值的数组和
    bigo一面凉经
    LeetCode 128.最长连续序列
    LeetCode中二分查找算法的变种
    LeetCode 93. 复原IP地址
    LeetCode 1004. 最大连续1的个数 III
    LeetCode 1282. 用户分组
    多线程理解
  • 原文地址:https://www.cnblogs.com/hualuoshuijia/p/7798685.html
Copyright © 2011-2022 走看看