<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • Vue+Electron下Vuex的Dispatch沒有效果的解決方案

    2019-5-16    seo達人

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    這個問題是解決基于 vue 和 electron 的開發中使用 vuex 的 dispatch 無效的問題,即解決了 Please, don't use direct commit's, use dispatch instead of this. 問題。

    先允許我梳理一下目錄結構,以便閱讀的時候不會一頭霧水,你到底說的這個文件是哪個……



    其中 /src/main 是存放主配置文件的,/src/render 下面有 store、router、components 等。

    components 下面就是很多 .vue 文件,router 下面就是一些路由配置的 js 文件和一些攔截器的 js。

    關鍵是 store,store 下面有一個 index.js 的主配置文件 index.js,和一個 modules 文件夾。

    index.js 里面寫的是(記住這句話,后面會用到):

    import Vue from 'vue'
    import Vuex from 'vuex'

    import { createPersistedState, createSharedMutations } from 'vuex-electron'

    import modules from './modules'

    Vue.use(Vuex)

    export default new Vuex.Store({
      modules,
      plugins: [
        createPersistedState(),
        createSharedMutations()
      ],
      strict: process.env.NODE_ENV !== 'production'
    })

    而 modules/ 下面存放各個實體,例如上圖中的 Auth.js 和 Counter.js,并通過 index.js 全部引入。

    /**
     * The file enables `@/store/index.js` to import all vuex modules
     * in a one-shot manner. There should not be any reason to edit this file.
     */

    const files = require.context('.', false, /\.js$/)
    const modules = {}

    files.keys().forEach(key => {
      if (key === './index.js') return
      modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
    })

    export default modules


    然后來看一個 vuex 的官方樣例:

    const state = {
      main: 0
    }

    const mutations = {
      DECREMENT_MAIN_COUNTER (state) {
        state.main--
      },
      INCREMENT_MAIN_COUNTER (state) {
        state.main++
      }
    }

    const actions = {
      someAsyncTask ({ commit }) {
        // do something async
        commit('INCREMENT_MAIN_COUNTER')
      }
    }

    export default {
      state,
      mutations,
      actions
    }


    之后很顯然的,我想要在 Vue 的組件調用 INCREMENT_MAIN_COUNTER 對計數器加 1。

    this.$store.commit('INCREMENT_MAIN_COUNTER');
    // this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
    1
    2
    如果是一般的 vue,就 OK 了,但是,我遇到了報錯,說,Please, don't use direct commit's, use dispatch instead of this.



    那好吧,沒事,不就是不然用 Commit,非要用 Dispatch 嘛,那我就寫一個 Action,里面直接調用 Mutation,就像這個樣子:

    const actions = {
      JUST_INCREASE ({ commit }) {
        commit('INCREMENT_MAIN_COUNTER')
      }
    }
    1
    2
    3
    4
    5
    然而奇怪的事情是,this.$store.dispatch('JUST_INCREASE') 并不能運行,沒反應,計數器還是 0,不能賦值,就像是這個函數沒有被執行一樣。沒有報錯,沒有任何異常,查也查不出什么問題。





    網上的資料似乎也挺少。

    折騰了很久,后來發現是 vuex-electron 里面一個插件的鍋。

    解決方法有兩個。

    方法一:

    在 store/index.js 里面,就是上文特別強調了的那個文件,去掉 createSharedMutations 插件。

    import Vue from 'vue'
    import Vuex from 'vuex'

    import { createPersistedState, createSharedMutations } from 'vuex-electron'

    import modules from './modules'

    Vue.use(Vuex)

    export default new Vuex.Store({
      modules,
      plugins: [
        createPersistedState(),
        createSharedMutations() // 注釋掉這一行
      ],
      strict: process.env.NODE_ENV !== 'production'
    })


    這是因為 vuex-electron 引入了一個用于多進程間共享 Vuex Store 的狀態的插件。如果沒有多進程交互的需求,完全可以不引入這個插件。

    注釋掉以后重啟項目,用 this.$store.commit('XXX') 就可以使用了。

    然而,如果需要多進程來處理怎么辦?

    方法二:

    https://github.com/vue-electron/vuex-electron#installation

    看第 3 條:

    In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):

    import './path/to/your/store'
    1
    這種時候就不能用第一種方法來解決問題了。

    好在文檔也說了,加上一行導入。

    找到 /src/main/index.js,在前面加上一句:

    import '../renderer/store'
    1


    之后一切正常,可以使用 Dispatch 來進行操作了。



    最后還有一個比較奇怪的問題:



    在直接調用 state 的時候,這樣寫 this.$store.state.loginStatus 是不行的,會 undefined,必須寫成 this.$store.state.Auth.loginStatus,就像是 this.$store.state.Counter.main 一樣,似乎可以解釋為,不同的模塊不指定名字的話就找不到。

    但是,在寫 Dispatch 的時候又不需要指定名字了,直接 dispatch('changeLoginStatus') 就行了,不然難道不應該是也按照 dispatch('Auth/changeLoginStatus') 這樣子來寫嘛……
    藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 在线亚洲精品福利网址导航| 久久99热精品| 国产精品亚洲аv无码播放| 国产成人精品无人区一区| 欧美精品欧美人与动人物牲交| 国内精品久久久久久久久| 国产精品视频一区国模私拍| 无码精品A∨在线观看中文| 欧美国产精品久久高清| 国产成人高清精品一区二区三区| 国产精品视频久久久| 精品国产a∨无码一区二区三区 | 国产成人精品无码免费看| 伊人 久久 精品| 久久久精品无码专区不卡| 国产精品视频九九九| 98香蕉草草视频在线精品看| 亚洲第一精品在线视频| 精品国内片67194| 国产91久久精品一区二区| 国精品无码一区二区三区左线| 色欲国产麻豆一精品一AV一免费| 亚洲精品A在线观看| 无码人妻精品一区二| 色婷婷噜噜久久国产精品12p| 久久久久久国产精品无码下载| 精品无码久久久久久国产| 国产精品福利在线观看免费不卡 | 国产精品www| 国产精品成人观看视频国产| 国内精品伊人久久久久AV影院| 久久亚洲精品成人AV| 四虎影视永久在线观看精品| 无码人妻精品一区二区三区66 | 欧洲精品色在线观看| 亚洲AV午夜福利精品一区二区 | 欧美激情视频精品一区二区| 牛牛在线精品观看免费正| 久久久久一级精品亚洲国产成人综合AV区 | 国产区精品高清在线观看| 精品久久久久久久中文字幕|