vue的配置及使用

2021-09-19 06:25:32 字數 1611 閱讀 8700

vuex 配置步驟

安裝vuex

cnpm i vuex -s

匯入 vuex

import vuex from 『vuex』

將vuex 掛載到 vue中

vue.use(vuex)

new vuex.store() 例項,得到乙個資料倉儲物件

將 vuex 建立的 store 掛載到 vm 例項上,只要掛載vm上,任何元件都能使用 store 來訪問資料

var store = new vuex.store(' at position 32: …來訪問 count:0 }̲, mutations:,

getters:

// 經過回顧對比,getters 中的方法,和元件中的過濾器比較類似,因為 過濾器和getters 都沒有修改原資料,都是把原資料做了一層包裝,提供給了呼叫者;

// 其次:getters 也和 computed 比較像,只要 state 中的資料發生變化,那麼,如果 getters 正好 也引用了這個資料,那麼 就會立即觸發 getters 的重新求值;

}簡單的例子

main.js檔案:

var store = new vuex.store(' at position 42: … count: 0 }̲, mutations…store.commit(『方法名』)

// 這種 呼叫 mutations 方法的格式,和 this.$emit(『父元件中的方法名』)

},getters:

// 經過回顧對比,getters 中的方法,和元件中的過濾器比較類似,因為 過濾器和getters

// 都沒有修改原資料,都是把原資料做了一層包裝,提供給了呼叫者;

// 其次:getters 也和 computed 比較像,只要 state 中的資料發生變化,那麼,如果 getters

// 正好 也引用了這個資料,那麼 就會立即觸發 getters 的重新求值;}})

counter.vue檔案:

amount.vue檔案: 總結

state 中的資料,不能直接修改,如果想要修改,必須通過 mutations

如果元件想要直接,從 state 上獲取資料:需要 this.sto

re.s

tate

.∗∗∗

如果元件

,想要修

改資料,

必須使用

muta

tion

提供的方

法,需要

通過th

is

.store.state.*** 如果 元件,想要 修改資料,必須使用 mutation 提供的方法,需要通過 this.

store.

stat

e.∗∗

∗如果組

件,想要

修改資料

,必須使

用mut

atio

n提供的

方法,需

要通過t

his.

store.commit(『方法名稱』,乙個引數)

如果 store 中 state 上的資料,在對外提供的時候,需要做一層包裝,那麼,推薦使用 getters,如果需要使用 getters,則用 this.$store.getters.***

vue中全域性filter過濾配置及使用

想必每個專案中都會存在要使用filter過濾資料的情況,以前剛接觸vue的時候,哪個頁面有需要過濾的資料就跑哪個頁面寫乙個filters,現在成長啦,知道可以提到全域性去寫乙個filters.js檔案來解決啦!1.建立乙個filters.js檔案,本例中我建立在assets util下,比如過濾時間...

vue的配置和使用

一 安裝 node.js 安裝完成後,可以命令列工具中輸入 node v 和 npm v,如果能顯示出版本號,就說明安裝成功。二 安裝 vue cli npm install g vue cli安裝完成後,可以使用 vue v檢視是否安裝成功。在安裝之前,可以看看npm是否有,執行npm v 你還可...

Vue環境安裝及配置

npm install npm g 安裝 npm v 檢視版本資訊 4 cnpm安裝參考 npm install g cnpm 在git中輸入 cnpm 檢驗是否安裝成功 5 yarn安裝參考 npm install g yarn yarn v 檢驗是否安裝成功 6 vue安裝 cnpm insta...