vuex常用實(shí)戰(zhàn)代碼（同步+異步）

henry14 發(fā)布于2019-08-30 15:54 / 3293人閱讀

摘要：的幾個項目中也使用過，總結(jié)一下，方便使用倉庫寫法引入部分引入引入使用存儲寫法異步寫法，返回對象截圖參考中引入中寫法看的文件在哪里引入中注冊組件使用倉庫讀取寫入同步讀取方法一引入直接可以在視圖中綁定參數(shù)方法二引入讀取倉庫里的參數(shù)寫入引入引入里

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

倉庫寫法(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中引入

main.js中寫法

import store from "./store.js"    //看store的文件在哪里引入

new Vue({
  el: "#app",
  router,
  store,                //vue中注冊組件
  components: { App },
  template: ""
})

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

1.讀取

（方法一）

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

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

直接可以在視圖中綁定"dyrouter"參數(shù)

（方法二）

import store from "@/store"    //引入store

store.getters.dyrouter            //讀取store倉庫里的dyrouter參數(shù)

2.寫入

import { mapMutations } from "vuex"

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

vue使用倉庫寫入（異步）

import store from "@/store"        //引入store

store.dispatch("setdynamicrouter","傳入的參數(shù)").then(()=>{
            存入完成后的執(zhí)行回調(diào)，在這里再去取參數(shù)就不會為空
        })

以上總結(jié)僅為個人常用到的，更多詳見官網(wǎng)