vuex簡單使用

2021-10-09 15:56:32 字數 1894 閱讀 6529

當我們想要從乙個元件傳遞乙個引數到另外乙個元件的時候,這兩個元件不是父子元件,也不是兄弟元件,這樣我們就可以用vuex(乙個集中存貯資料的公共倉庫)我覺得官網用於計算變數的在實際中並不是很常用,通常使用vuex就是儲存一些變數,比如我在登入的時候獲取到使用者名稱,要展示在內頁裡,我就會把這個使用者名稱儲存在store中,在內頁裡取出來展示,還有在登入的時候獲取到的一些許可權資料,在內部進行許可權分配的時候要用,就在會在登入之後獲取到存在vuex中,需要判斷許可權的時候取出來,比如我想要在另外乙個頁面獲取到這也頁面的相關引數,我可以在這個元件裡存起來,到另外乙個元件裡取出來,而不用傳參。

例如

我們想把a元件變數傳給b元件只需要兩步

第一步: 在a元件的時候把變數studentobj 存到倉庫裡

第二步:在到b元件裡把studentobj 從倉庫裡取出來

可見,vuex可以幫助我們管理共享狀態,但是有很多概念和框架,這裡我們只講最簡單的訪問,關於模組化和計算的先不做。

vuex是乙個專門為vue.js應用程式開發的狀態管理模式

vuex是適用於在vue專案開發時使用的狀態管理工具,相當於乙個狀態管理倉庫,或者說是乙個響應式的全域性變數

核心概念

1、安裝

如果你已經完成了vue專案的建立,那麼你就可以在該專案目錄下執行下面指令。

npm i vuex -s
2、新建store/index

這裡我把專案整個結構截圖,store/index就在這裡、在裡面進行變數的定義、管理和派生

具體內容如下

import vue from

'vue'

import vuex from

'vuex'

vue.

use(vuex)

const store =

newvuex.store(,

mutations:

,setstunamenedef

(state)},

})export

default store

3、在main.js中引用
import vue from

'vue'

import store from

'store'

//這句話是引入store

import router from

'router'

import

from

'uni-******-router'

vue.config.productiontip =

false

newvue

()

4、儲存資料

比如我們獲取到了學生姓名,這時候把它儲存在vux中 login.vue中

methods:).

then

((data)

=>)}

}

5、使用資料

比如我們要在info.vue中使用這個學生的姓名資訊就可以直接使用

>

name:

}<

/h1>

<

/div>

<

/template>6、結束

Vuex 簡單使用

安裝vuex vuex官方文件 npm install vuex svue中使用vuex store index.js import vue from vue import vuex from vuex vue.use vuex const store newvuex.store getters m...

vuex 簡單使用

export default new vuex.store mutations actions 解構 context物件,context與store例項具有相同的屬性和方法。這裡commit 就是 store.commit getlists 元件內使用 created 一般都在 computed 獲...

vuex的簡單使用

使用了 vue lic腳手架 我不說得很理論,我就說得很通俗 在store檔案下面寫成 index.js是載入全部 下面是 modules檔案下的wallet.js export default getters mutations actions src 這是index.js import vue ...