關於Vuex的初步使用

store.js文件中定義各個訪問狀態和方法

 

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {         //定義訪問狀態對象
    count : 44
}

const mutations = {      //定義觸發狀態對象方法,傳入state整個對象
    jia(state) {
        state.count ++
    }
}

const getters = {     //相似計算屬性,對state的數據進行復雜的邏輯計算,使用return返回結果
    count : function (state){
        return state.count += 100
    }
}

const actions =  {      //異步執行方法,傳入參數context,等同於整個store
    jianplus (context) {
      context.commit("jia",10)    //調用mutations中的方法並傳參
    }

  testplus ({commit}) {   //簡寫方式,使用{}  單獨傳入mutations對象
        commit(‘jian’)      //調用mutations中的方法
    }

three({commit,dispatch}){ //使用dispatch調用actions的方法
  return dispatch('testplus').then(()=>{
    commit('jianplus')
  })
} }, Const moduleA
= { //定義一個模塊,引入各個狀態對象或方法 state, mutations, getters, actions } export default new Vuex.Store ({ //沒有使用模塊時的寫法 state, mutations, gettrts, actions }) // export default new Vuex.Store ({ //使用模塊時的寫法 // modules : { // a : moduleA //引入定義模塊 // } // })

1、state   定義訪問狀態  定義的是常量

如何在HTML中訪問:當未引入 mapState時,可經過$store去訪問    引入時按照正常的變量使用vue

<h1>{{$store.state.count}}</h1>   //經過$store去訪問

 

 

在vue文件中的定義:在計算屬性computed位置進行引用,使用mapStatevuex

import {mapState } from ‘Vuex’       //引入 mapState
export default {
  name: 'test',

  data: () => ({
    test: '',
  }),

  methods: {

  },
  

  // computed: mapState([   //直接使用state中定義的count     注意這裏是一個數組
  //   "count"
  // ])

  computed: mapState({    //對state中定義的count作運算後再使用   注意這裏是一個對象
 count : state => state.count+1 }) 

}

 

 

2、mutations   定義觸發訪問狀態的方法    觸發方法爲同步執行

如何使用:跟事件觸發方法同樣跟在各類事件以後,經過commit方法觸發   數組

<button type="button" @click="$tore.commit(「jia」)"></button>

 

 

如何傳參:括號內第一個值爲方法名,後面爲傳入參數,傳入的參數能夠爲一個對象異步

<button type="button" @click="$tore.commit(「jia」,10)"></button>

 

 

在vue文件中的定義:在定義方法methods位置進行引用,使用mapMutationsthis

 

import {mapState,mapMutations} from ‘Vuex’       //引入 mapMutations
export default {
  name: 'test',

  data: () => ({
    test: '',
  }),

  methods:mapMutations([     //定義mutations中的各個方法
    ‘jia’,
    ‘jian’
  ])
    

  computed: mapState({    //對state中定義的count作運算後再使用
    count : state =>  state.count+1   
  })
}

 

 

 

3、getters      相似於計算屬性  通常在對訪問狀態內的數據作複雜運算時使用

在vue文件中的定義:在計算屬性computed位置進行引用,使用mapGettersspa

 

 computed : {         //vue文件中只能有一個computed,同時定義state時,須要改變寫法
    ...mapState ({    //注意使用...
      "count」 
    }),
    
    count () {        //調用getters中的count方法,將值return出去
      return this.$store.getters.count
    }

 

 

簡化寫法:引入mapGetterscode

import {mapState,mapMutations,mapGetters} from ‘Vuex’       //引入 mapGetters
export default {
  name: 'test',

  data: () => ({
    test: '',
  }),

  methods:mapMutations([     //定義mutations中的各個方法
    ‘jia’,
    ‘jian’
  ])
    

 computed : {         //vue文件中只能有一個computed,同時定義state時,須要改變寫法
    ...mapState ({    //注意使用...
      "count」 
    }),
    
    ...mapGetters([      //調用getters中的count
          "count」
      ])
  }
}

 

 

4、actions   異步觸發方法

在vue文件中的定義:在定義方法methods位置進行引用,使用mapActions   也能夠經過dispatch方法觸發  對象

import {mapState,mapMutations,mapGetters,mapActions} from ‘Vuex’       //引入 mapActions
export default {
  name: 'test',

  data: () => ({
    test: '',
  }),

methods:{
  ...mapMutations([
        ‘jia’,
        ‘jian’
    ]),
    
  ...mapActions([     //引入actions中定義的jiaplus方法
        ‘jiaplus’
    ])
}

    

 computed : {         
    ...mapState ({    
      "count」 
    }),
    
    ...mapGetters([      
          "count」
      ])
  }
}
<button type="button" @click="$tore.dispatch(「jiaplus」)"></button>

dispatch表明的是actions的整個對象,咱們能夠經過在其中一個actions中傳入dispatch觸發其餘的actions方法,會有一個返回值

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },

  actionB ({ dispatch, commit }) {
    // 組合,傳入dispatch  調用actions的其餘方法
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

 

 

 

5、modules  模塊組   當有多個store對象時使用

相關文章
相關標籤/搜索