vuex的簡單使用

2021-09-13 10:08:24 字數 1280 閱讀 7938

1,vuex是專為vue.js設計的狀態管理模式,集中儲存和管理應用程式中所有元件的狀態,適用於中大型單頁應用

2,使用vuex的第一步: 引入

import vue from 'vue';

import vuex from 'vuex';

vue.use(vuex);

同樣需要在main.js中引入store

import store from './store';

window.$vue = new vue();

window.store = store;

export default store;

如果專案比較大,建議分模組處理,如下

這樣**更清晰,便於查詢,namespaced相當於命名空間,在引入方法的時候需要加上所屬模組的模組名

4,接下來就是在各個模組內的使用了,這裡就說最簡單的。使用mapgetters,mapactions,mapmutations,mapstate

import  from 'vuex';

computed: ,

methods:

通過map的方式引入方法以及狀態是可以直接使用的,就和使用methods內的方法和data內的屬性一樣的,這裡使用mapgetters 的好處是可以對資料進行一步處理,例如過濾篩選,

另外就是有一點需要注意的: 狀態改變必須通過mutation顯式的提交,例如await乙個一步請求完成之後通過commit提交資料

//action

async getclient(, data) ,

//mutation

uploadclientlist(state, data) ,

如有錯誤,敬請指

vuex的簡單使用

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

vuex 簡單的使用

首先是專案目錄結構 我的vuex的目錄是這樣的,簡單說一下每個js檔案的作用吧 首先是 index.js 檔案 這個檔案主要配置 vuex 的入口及檔案的配置 import vue from vue import vuex from vuex vue.use vuex import state fr...

vuex的簡單使用

專案結構 一 建立store 建立分割成模組 module 的state 專案 中建立store資料夾,同時建立index.js,在modules中定義userinfo這個state index.js import vue from vue import vuex from vuex vue.use...