分分鐘學會vue中vuex的應用

2021-09-16 13:48:03 字數 1140 閱讀 9937

在vue中當我們管理資料的時候比較亂,我們要用到下面的這個庫,vuex.js

vuex介紹

每乙個vuex應用的核心就是store(倉庫),他是用來儲存資料的

"store" 基本上就是乙個容器,它包含著你的應用中大部分的狀態(state)。vuex 和單純的全域性物件有以下兩點不同

1.vuex 的狀態儲存是響應式的

2.你不能直接改變 store 中的狀態

vuex有6個概念

store(最基本的概念)(創庫)

state (資料)

getters(可以說是計算屬性)

mutations

actions

modules

讓我們看看怎麼來建立乙個創庫

store 用來儲存資料(狀態)

new vuex.store({})
資料我們放到state裡面
state:{}
讓我們看看怎麼來讀取裡面的資料
store.state.資料
接下來讓我們看看怎麼去修改資料
mutations: {}
我們怎麼調mutations的資料
用commit()方法來呼叫
接下來讓我們做乙個小效果來看一下vuex在vue中怎麼應用

我們做乙個購物車加減按鈕的效果

執行效果

我們從store裡面獲取的資料最好放到計算屬性中

當乙個元件需要獲取多個狀態時候,將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題,我們可以使用mapstate輔助函式幫助我們生成計算屬性

下面我們做乙個小的效果(注意:注釋的計算屬性和下面使用mapstate輔助函式2個結果是相同的)

當對映的計算屬性的名稱與 state 的子節點名稱相同時,我們也可以給 mapstate 傳乙個字串陣列。

執行效果

vue中vuex的總結

模板裡面不需要寫this.js中必須寫上 觸發事件的通知,如果需要資料的話,必須要指定兩個東西 訊息名和資料,不需要資料的話只指定訊息名 觸發store中對應的action去呼叫,要對應起來,如何對應呢?方法名和訊息名一致 元件中一旦要讀vuex管理的狀態或者計算屬性,都在元件的computed去操...

vue 中的Vuex實踐

建乙個資料夾store 在下面新建乙個檔案inde.jx import vue from vue import vuex from vuex vue.use vuex const state export default newvuex.store 在main.js 中新增 如果index.js換作...

vue中的vuex的使用

vuex是乙個專為vue應用程式中資料的狀態的管理技術。要想使用vuex首先我們要安裝 基於npm包 在專案檔案 按住shift鍵 滑鼠右鍵 在命令列終端開啟 輸入 npm i vuex s s是儲存本地的pack.json檔案中 在vue專案的main.js中引入 vuex import vuex...