vue中使用vuex的超詳細教程
vuex是使用vue中必不可少的一部分，基于父子、兄弟組件，我們傳值可能會很方便，但是如果是沒有關聯(lián)的組件之間要使用同一組數(shù)據(jù)，就顯得很無能為力，那么vuex就很好的解決了我們這種問題，它相當于一個公共倉庫，保存著所有組件都能共用的數(shù)據(jù)。
那么，我們一起來看看vue項目怎么使用它吧。（如果你對vuex有一定了解，不是剛接觸的小白，請忽略第一步，直接查看第二步）
一、適合初學者使用，保存數(shù)據(jù)以及獲取數(shù)據(jù)
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;
},
// 保存當前點擊的數(shù)據(jù)源
saveCurrDbSource(state,currDbSource){
state.currDbSource = currDbSource;
},
// 保存當前點擊的元數(shù)據(jù)
saveCurrJobData(state,currJobData){
state.currJobData = currJobData;
},
// 保存所有數(shù)據(jù)源
saveDbSource(state,DbSource){
state.DbSource = DbSource;
}
}
})這里解釋一下各個代碼段的作用：state是自定義的一些變量，需要用來保存數(shù)據(jù)，mutations是用來觸發(fā)事件，相當于方法，用戶需要通過觸發(fā)這個方法，借此來保存數(shù)據(jù)，參數(shù)的話，第二個參數(shù)就是用戶傳入的值，然后在方法中賦值給state中的變量
2、main.js引用：（注意路徑即可）
// 引入vuex-store
import store from './store/index';
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});3、保存數(shù)據(jù)：（場景舉例：當我點擊按鈕后，我需要把當前的數(shù)據(jù)保存到vuex中，然后跳轉到別的路由，然后使用這些數(shù)據(jù)）
methods:{
click(){
// 點擊按鈕進行一些操作，然后保存數(shù)據(jù)
this.$store.commit('saveCurrDbSource',this.db)
}
}這里的第一個參數(shù)是要觸發(fā)的方法，也就是上面mutations中的方法，第二個參數(shù)是你要傳遞的數(shù)據(jù)
4、獲取變量：（當數(shù)據(jù)初始獲取不到時，可以使用計算屬性用來獲?。?/p>
this.$store.state.變量名 // 例如 this.$store.state.currDbSource
這樣其他組件就可以共用這個保存起來的數(shù)據(jù)了，也能進行相應的修改
二、模塊化（適合有部分基礎的人）
當然，上述方法中我們把所有東西都寫在一個文件中了，這樣數(shù)據(jù)多的時候，耦合度太高，也不便于維護，而且mutations也不能解決異步問題，這里就介紹另一種方式以及actions
actions：看過官網(wǎng)介紹的人都知道，這是間接觸發(fā)mutations方法的一種 " 中間商 "，而且它可以執(zhí)行異步操作，避免用戶去直接操作state
1、state.js ：保存所有數(shù)據(jù)，以對象的方式導出
export default {
pathName: '', // 路由
currDbSource: {}, // 當前數(shù)據(jù)源
currJobData: {}, // 當前元數(shù)據(jù)
DbSource: [], // 所有數(shù)據(jù)源，供元數(shù)據(jù)界面下拉列表使用
selectJobMeta: {}, // 當前選擇的元數(shù)據(jù)（搜索后點擊的單條數(shù)據(jù)）
specialSubject: [], // 專題數(shù)據(jù)（多條）
duplicateJobMeta: {}, // 復制的數(shù)據(jù)
};2、mutations.js ：保存所有方法，用來改變state的數(shù)據(jù)
// 保存當前菜單欄的路徑
export const savePath = (state, pathName) => {
state.pathName = pathName;
};
// 保存當前點擊的數(shù)據(jù)源
export const saveCurrDbSource = (state, currDbSource) => {
state.currDbSource = currDbSource;
};
// 保存當前點擊的元數(shù)據(jù)
export const saveCurrJobData = (state, currJobData) => {
state.currJobData = null;
state.currJobData = currJobData;
};
// 保存所有數(shù)據(jù)源
export const saveDbSource = (state, DbSource) => {
state.DbSource = DbSource;
};
// 保存搜索后選擇的那一條元數(shù)據(jù)
export const saveSelectJobMeta = (state, selectJobMeta) => {
state.selectJobMeta = selectJobMeta;
};
// 保存搜索的那一類專題
export const saveSpecialSubject = (state, specialSubject) => {
state.specialSubject = specialSubject;
state.selectJobMeta = {};
};
// 保存復制的元數(shù)據(jù)（名稱為空）
export const saveDuplicateJobMeta = (state, duplicateJobMeta) => {
state.duplicateJobMeta = duplicateJobMeta;
};3、actions.js ：暴露給用戶使用，借此觸發(fā)mutations中的方法，保存數(shù)據(jù)（可執(zhí)行異步操作）
// 觸發(fā)保存菜單欄的路徑方法
export const savePath = ({ commit }, payload) => {
commit('savePath', payload);
};
// 觸發(fā)獲取當前點擊的數(shù)據(jù)源方法
export const saveCurrDbSource = ({ commit }, payload) => {
commit('saveCurrDbSource', payload);
};
// 觸發(fā)獲取當前點擊的元數(shù)據(jù)方法
export const saveCurrJobData = ({ commit }, payload) => {
commit('saveCurrJobData', payload);
};
// 觸發(fā)獲取所有數(shù)據(jù)源方法
export const saveDbSource = ({ commit }, payload) => {
commit('saveDbSource', payload);
};
// 觸發(fā)保存搜索后選擇單條元數(shù)據(jù)方法
export const saveSelectJobMeta = ({ commit }, payload) => {
commit('saveSelectJobMeta', payload);
};
// 觸發(fā)保存搜索專題數(shù)據(jù)方法
export const saveSpecialSubject = ({ commit }, payload) => {
commit('saveSpecialSubject', payload);
};
// 觸發(fā)保存復制元數(shù)據(jù)方法
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上下文用來觸發(fā)事件，一種是直接通過commit，為了保存數(shù)據(jù)，都需要加第二個參數(shù)payload，不然保存到vuex的數(shù)據(jù)就是空值
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、保存數(shù)據(jù)
import { mapActions } from 'vuex';
// 2種方式
// 方法一（dispatch）
this.$store.dispatch('saveDbSource', this.DbSource);
// 方法二（映射）
// 1、通過methods方法添加映射關系
methods: {
...mapActions(['saveDbSource'])
}
// 2、使用
this.saveDbSource這里也有2種保存數(shù)據(jù)的方法，第一種就是直接操作方法，通過disptach派發(fā)給actions，讓actions去觸發(fā)
第二種就是通過在methods中添加映射關系，數(shù)組方式，意味著我們可以在數(shù)組中寫多個方法（這里數(shù)組中的每一個方法名是actions.js文件中所定義的方法名），然后在需要使用的地方直接this.方法名即可。當然，也可以直接綁定給html中的某個事件。
值的注意的是，避免和methods中自己定義的其他方法的名字沖突
7、獲取數(shù)據(jù)
import { mapState } from 'vuex';
computed: {
...mapState(['DbSource']),
// 推薦寫法如下：
//...mapState({
// DbSource: state => state.DbSource,
// phoneMap: state => state.richCommunicationSuite.phoneMap, // 模塊化寫法
//}),
},
watch: {
DbSource(currVal) {
// 監(jiān)聽mapState中的變量，當數(shù)據(jù)變化（有值、值改變等），
// 保證能拿到完整的數(shù)據(jù)，不至于存在初始化沒有數(shù)據(jù)的問題，然后可以賦給本組件data中的變量
this.currVal = currVal;
}
}通過計算屬性，當數(shù)據(jù)發(fā)生改變，我們可以保證拿到的是響應過后的數(shù)據(jù)，也是數(shù)組形式，意味著我們可以拿到多組數(shù)據(jù)，這里數(shù)組中的數(shù)據(jù)也是state.js中定義的變量（當然，更推薦使用我注釋的那段代碼，那種寫法可以應對當state中存在多模塊的情況，比如state.a.xxx，state.b.xxx，其中a和b都是兩個模塊，各自有對應的數(shù)據(jù)要存儲，也可以自定義我們前面的名字來避免和data中數(shù)據(jù)重名的情況）
使用的時候，可以直接通過this.變量名拿到，例如本例中的 this.DbSource，我們可以把它賦給我們自定義的變量，也可以直接使用
值的注意的是，避免和data中自己定義的其他變量的名字沖突
至此，我們就完成了vuex的保存以及獲取數(shù)據(jù)，希望對你有所幫助。
當然，我們需要把一vuex中的一組數(shù)據(jù)過濾，其他組件都共用過濾后的數(shù)據(jù)，這種情況大家可能會用到getters，這里我就不多贅述了，有興趣的小伙伴可以自己了解一下。
附上vuex的運行過程，官網(wǎng)的圖片：組件派發(fā)任務到actions，actions觸發(fā)mutations中的方法，然后mutations來改變state中的數(shù)據(jù)，數(shù)據(jù)變更后響應推送給組件，組件重新渲染
到此這篇關于vue中使用vuex的超詳細教程的文章就介紹到這了,更多相關vue使用vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法代碼詳解
el-table是element-ui提供的表格組件,可以用于展示和操作數(shù)據(jù),這篇文章主要給大家介紹了關于Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法的相關資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了封裝 axios+promise通用請求函數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue項目打包后請求地址錯誤/打包后跨域操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue項目記錄鎖定和解鎖功能實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue-cli-service的參數(shù)配置過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯誤的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
基于Vue3和Element Plus實現(xiàn)自動導入功能
Vue 3中常用的生命周期鉤子和監(jiān)聽器的操作方法