vuex經常使用實戰代碼（同步+異步）

vue的幾個項目中也使用過vuex，總結一下，方便使用

倉庫寫法(store.js)

1.引入部分

import Vue from 'vue'    //引入vue
import Vuex from 'vuex'    //引入vuex

Vue.use(Vuex)    //    vue使用vuex

2.存儲寫法

const state = {
    dyrouter:"",
}

const mutations = {
    SET_DYNAMIC_ROUTER(state,value){
        state.dyrouter = value
    },
}
const getters = {
    dyrouter: state => state.dyrouter,
}
const actions = {        //異步寫法，返回promise對象
    setdynamicrouter({commit},data){
        return new Promise(resolve => {
            commit('SET_DYNAMIC_ROUTER',data)
            resolve()
        })
    },
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

截圖參考

vue中引入

1. main.js中寫法

import store from './store.js'    //看store的文件在哪裏引入

new Vue({
  el: '#app',
  router,
  store,                //vue中註冊組件
  components: { App },
  template: '<App/>'
})

vue使用倉庫讀取、寫入（同步）

1.讀取

• （方法一）

import { mapState } from 'vuex'        //引入mapState

computed: {
            ...mapState([
                "dyrouter"
            ]),
        },

直接能夠在視圖中綁定"dyrouter"參數

• （方法二）

import store from '@/store'    //引入store

store.getters.dyrouter            //讀取store倉庫裏的dyrouter參數

2.寫入

import { mapMutations } from 'vuex'

methods: {
            ...mapMutations([                           //引入mapMutations
                "SET_DYNAMIC_ROUTER"                    //引入vuex裏面的函數方法
            ]),
            this.SET_DYNAMIC_ROUTER("傳入的參數");        //使用該方法
}

vue使用倉庫寫入（異步）

import store from '@/store'        //引入store

store.dispatch('setdynamicrouter',"傳入的參數").then(()=>{
            存入完成後的執行回調，在這裏再去取參數就不會爲空
        })

以上總結僅爲我的經常使用到的，更多詳見官網