vue中使用vuex的超詳細教程
vuex是使用vue中必不可少的一部分,基於父子、兄弟組件,我們傳值可能會很方便,但是如果是沒有關聯的組件之間要使用同一組數據,就顯得很無能為力,那麼vuex就很好的解決瞭我們這種問題,它相當於一個公共倉庫,保存著所有組件都能共用的數據。
那麼,我們一起來看看vue項目怎麼使用它吧。(如果你對vuex有一定瞭解,不是剛接觸的小白,請忽略第一步,直接查看第二步)
一、適合初學者使用,保存數據以及獲取數據
1、在store文件夾,新建個index.js文件(命名看個人習慣,如果沒有該文件夾,可以新建一個,當然也可以不建文件夾,直接新建個js文件也是可以的)
在新建的js文件中寫入如下代碼:
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); export default new Vuex.Store({ state:{ pathName: "", currDbSource: {}, currJobData: {}, DbSource: [] }, mutations:{ // 保存當前菜單欄的路徑 savePath(state,pathName){ state.pathName = pathName; }, // 保存當前點擊的數據源 saveCurrDbSource(state,currDbSource){ state.currDbSource = currDbSource; }, // 保存當前點擊的元數據 saveCurrJobData(state,currJobData){ state.currJobData = currJobData; }, // 保存所有數據源 saveDbSource(state,DbSource){ state.DbSource = DbSource; } } })
這裡解釋一下各個代碼段的作用:state是自定義的一些變量,需要用來保存數據,mutations是用來觸發事件,相當於方法,用戶需要通過觸發這個方法,借此來保存數據,參數的話,第二個參數就是用戶傳入的值,然後在方法中賦值給state中的變量
2、main.js引用:(註意路徑即可)
// 引入vuex-store import store from './store/index'; new Vue({ el: '#app', router, store, render: h => h(App) });
3、保存數據:(場景舉例:當我點擊按鈕後,我需要把當前的數據保存到vuex中,然後跳轉到別的路由,然後使用這些數據)
methods:{ click(){ // 點擊按鈕進行一些操作,然後保存數據 this.$store.commit('saveCurrDbSource',this.db) } }
這裡的第一個參數是要觸發的方法,也就是上面mutations中的方法,第二個參數是你要傳遞的數據
4、獲取變量:(當數據初始獲取不到時,可以使用計算屬性用來獲取)
this.$store.state.變量名 // 例如 this.$store.state.currDbSource
這樣其他組件就可以共用這個保存起來的數據瞭,也能進行相應的修改
二、模塊化(適合有部分基礎的人)
當然,上述方法中我們把所有東西都寫在一個文件中瞭,這樣數據多的時候,耦合度太高,也不便於維護,而且mutations也不能解決異步問題,這裡就介紹另一種方式以及actions
actions:看過官網介紹的人都知道,這是間接觸發mutations方法的一種 " 中間商 ",而且它可以執行異步操作,避免用戶去直接操作state
1、state.js :保存所有數據,以對象的方式導出
export default { pathName: '', // 路由 currDbSource: {}, // 當前數據源 currJobData: {}, // 當前元數據 DbSource: [], // 所有數據源,供元數據界面下拉列表使用 selectJobMeta: {}, // 當前選擇的元數據(搜索後點擊的單條數據) specialSubject: [], // 專題數據(多條) duplicateJobMeta: {}, // 復制的數據 };
2、mutations.js :保存所有方法,用來改變state的數據
// 保存當前菜單欄的路徑 export const savePath = (state, pathName) => { state.pathName = pathName; }; // 保存當前點擊的數據源 export const saveCurrDbSource = (state, currDbSource) => { state.currDbSource = currDbSource; }; // 保存當前點擊的元數據 export const saveCurrJobData = (state, currJobData) => { state.currJobData = null; state.currJobData = currJobData; }; // 保存所有數據源 export const saveDbSource = (state, DbSource) => { state.DbSource = DbSource; }; // 保存搜索後選擇的那一條元數據 export const saveSelectJobMeta = (state, selectJobMeta) => { state.selectJobMeta = selectJobMeta; }; // 保存搜索的那一類專題 export const saveSpecialSubject = (state, specialSubject) => { state.specialSubject = specialSubject; state.selectJobMeta = {}; }; // 保存復制的元數據(名稱為空) export const saveDuplicateJobMeta = (state, duplicateJobMeta) => { state.duplicateJobMeta = duplicateJobMeta; };
3、actions.js :暴露給用戶使用,借此觸發mutations中的方法,保存數據(可執行異步操作)
// 觸發保存菜單欄的路徑方法 export const savePath = ({ commit }, payload) => { commit('savePath', payload); }; // 觸發獲取當前點擊的數據源方法 export const saveCurrDbSource = ({ commit }, payload) => { commit('saveCurrDbSource', payload); }; // 觸發獲取當前點擊的元數據方法 export const saveCurrJobData = ({ commit }, payload) => { commit('saveCurrJobData', payload); }; // 觸發獲取所有數據源方法 export const saveDbSource = ({ commit }, payload) => { commit('saveDbSource', payload); }; // 觸發保存搜索後選擇單條元數據方法 export const saveSelectJobMeta = ({ commit }, payload) => { commit('saveSelectJobMeta', payload); }; // 觸發保存搜索專題數據方法 export const saveSpecialSubject = ({ commit }, payload) => { commit('saveSpecialSubject', payload); }; // 觸發保存復制元數據方法 export const saveDuplicateJobMeta = ({ commit }, payload) => { commit('saveDuplicateJobMeta', payload); };
這裡有2種方式:
// 方法一: export const saveDbSource = (context, payload) => { context.commit('saveDbSource', payload); }; // 方法二: export const saveDbSource = ({ commit }, payload) => { commit('saveDbSource', payload); };
第一種是通過 context上下文用來觸發事件,一種是直接通過commit,為瞭保存數據,都需要加第二個參數payload,不然保存到vuex的數據就是空值
4、index.js:引入相應模塊,暴露出store,供vue註冊後全局使用
import Vue from 'vue'; import Vuex from 'vuex'; import state from './state'; import * as actions from './actions'; import * as mutations from './mutations'; Vue.use(Vuex); export default new Vuex.Store({ state, actions, mutations });
5、main.js中引入index.js
// 引入vuex-store import store from './store/index'; new Vue({ el: '#app', router, store, render: h => h(App) });
6、保存數據
import { mapActions } from 'vuex'; // 2種方式 // 方法一(dispatch) this.$store.dispatch('saveDbSource', this.DbSource); // 方法二(映射) // 1、通過methods方法添加映射關系 methods: { ...mapActions(['saveDbSource']) } // 2、使用 this.saveDbSource
這裡也有2種保存數據的方法,第一種就是直接操作方法,通過disptach派發給actions,讓actions去觸發
第二種就是通過在methods中添加映射關系,數組方式,意味著我們可以在數組中寫多個方法(這裡數組中的每一個方法名是actions.js文件中所定義的方法名),然後在需要使用的地方直接this.方法名即可。當然,也可以直接綁定給html中的某個事件。
值的註意的是,避免和methods中自己定義的其他方法的名字沖突
7、獲取數據
import { mapState } from 'vuex'; computed: { ...mapState(['DbSource']), // 推薦寫法如下: //...mapState({ // DbSource: state => state.DbSource, // phoneMap: state => state.richCommunicationSuite.phoneMap, // 模塊化寫法 //}), }, watch: { DbSource(currVal) { // 監聽mapState中的變量,當數據變化(有值、值改變等), // 保證能拿到完整的數據,不至於存在初始化沒有數據的問題,然後可以賦給本組件data中的變量 this.currVal = currVal; } }
通過計算屬性,當數據發生改變,我們可以保證拿到的是響應過後的數據,也是數組形式,意味著我們可以拿到多組數據,這裡數組中的數據也是state.js中定義的變量(當然,更推薦使用我註釋的那段代碼,那種寫法可以應對當state中存在多模塊的情況,比如state.a.xxx,state.b.xxx,其中a和b都是兩個模塊,各自有對應的數據要存儲,也可以自定義我們前面的名字來避免和data中數據重名的情況)
使用的時候,可以直接通過this.變量名拿到,例如本例中的 this.DbSource,我們可以把它賦給我們自定義的變量,也可以直接使用
值的註意的是,避免和data中自己定義的其他變量的名字沖突
至此,我們就完成瞭vuex的保存以及獲取數據,希望對你有所幫助。
當然,我們需要把一vuex中的一組數據過濾,其他組件都共用過濾後的數據,這種情況大傢可能會用到getters,這裡我就不多贅述瞭,有興趣的小夥伴可以自己瞭解一下。
附上vuex的運行過程,官網的圖片:組件派發任務到actions,actions觸發mutations中的方法,然後mutations來改變state中的數據,數據變更後響應推送給組件,組件重新渲染
到此這篇關於vue中使用vuex的超詳細教程的文章就介紹到這瞭,更多相關vue使用vuex內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!