vue 開發(fā)過程遇到的坑-集合

Error 1:must call Vue.use(Vuex) before creating a store instance
Time:2017.05.02

在使用vuex的過程中,store 文件夾下的 index.js(如果是單文件就是store.js)

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import getters from './getters'
import listState from './modules/listState'
Vue.use(Vuex);
export default new Vuex.Store({
    actions,
    getters,
    modules: {
        listState
    }
})

實(shí)例化前已經(jīng)注冊(cè)了Vuex,but 依舊報(bào)錯(cuò)如下,

must call Vue.use(Vuex) before creating a store instance

檢查寫法,應(yīng)該是沒錯(cuò)的,后來在 github 中
https://github.com/eddyerburgh/avoriaz/issues/29

Sorry, this isn't a avoriaz issue. It is a webpack issue. I was on webpack@2.1.0-beta.22 which is required for Laravel's elixir node module. Webpack 2.1.0 breaks Vuex in testing for some reason. If you get this error upgrade webpack, and don't use elixir for your webpack configuration because it's broken。

看了下webpack的版本,正好是2.1.0,之后升級(jí)webpack到最新版本2.4.1,問題解決。

Error 2:關(guān)于 v-if 和 v-show 文件緩存
Time:2017.05.14
對(duì)于 v-if 和 v-show這兩個(gè)指令,還是比較熟悉的,和 ng 中的 ng-if 和ng-show 類似。雖然知道兩者的區(qū)別,但是開發(fā)過程中,基本都是用 v-if 和v-show 都可以,直到這次用七牛的文件上傳api,掉坑里去了。

碰到的問題是這樣的,使用七牛文件上傳的時(shí)候,文件上傳以后,如果不重新載入頁面,剛才上傳的文件被緩存在瀏覽器中,再次點(diǎn)擊文件上傳后,把上次上傳的文件也加載出來。
在解決這個(gè)問題的過程中,使用了 v-if 和 v-show ,發(fā)現(xiàn) 使用 v-if 竟然可以解決文件緩存的問題,而使用 v-show 竟然不行。

<el-form-item label="添加圖片" :label-width="formLabelWidth">
        <div v-if="files.length == 0">
            <upload-file
                :on-before-upload="BeforeUpload"
                :on-files-added="FilesAdded"
                :on-upload-progress='UploadProgress'
                :on-file-uploaded='FileUploaded'
                :on-upload-complete="UploadComplete"
                :on-error="UploadError"
             ></upload-file>
       </div>

看了下 vue 的文檔,

v-if 是真實(shí)的條件渲染,因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

相比之下, v-show 簡單得多——元素始終被編譯并保留,只是簡單地基于 CSS 切換。

原來是這樣,v-if 在重新渲染的過程中,清除了我剛才上傳的文件的“文件緩存”。借用宋小寶的那句話,“沒文化.....,你多看書啊,哈哈哈”

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容