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

gclove 發布于2019-08-23 14:08 / 2765人閱讀

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

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中引入

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"參數

（方法二）

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(()=>{
            存入完成后的執行回調，在這里再去取參數就不會為空
        })

以上總結僅為個人常用到的，更多詳見官網

GPU云服務器云服務器同步和異步同步與異步同步回調和異步回調同步調用和異步調用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100139.html

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

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

henry14 2019-08-30 15:54 評論0 收藏0
vuex常用實戰代碼（同步+異步）

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

junnplus 2019-08-02 13:55 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

Carson 2019-07-31 10:21 評論0 收藏0