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!

推薦閱讀: