Vuex簡單的來說就是vue項(xiàng)目中的屬于狀態(tài)管理的插件呛占。
因?yàn)轫?xiàng)目中也有用到祖今，下面我說下具體用法妆距。當(dāng)然很簡單的啦穷遂。
這是我這邊的目錄結(jié)構(gòu)
image.png
第一步當(dāng)然是引入。
import Vuex from 'vuex';
import store from './store/store';
Vue.use(Vuex);
new Vue({
el: '#app',
router: router,
store: store,
render: h => h(App)
});
第二步分別看下我的四個文件 store.js action.js getters.js mutation.js 中分別寫了些什么
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations';
import actions from './action';
import getters from './getters';
Vue.use(Vuex);
const state = {
startTime:'',//日歷result的時(shí)間
endTime:'',//時(shí)間
searchTitle:'',//在index頁面搜索的內(nèi)容
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
mutation.js 復(fù)制操作
export default{
SET_StartTime(state,startTime){
state.startTime = startTime;
},
SET_EndTime(state,endTime){
state.endTime = endTime;
},
SET_SearchTitle(state,searchTitle){
state.searchTitle = searchTitle;
}
}
getters.js get函數(shù)
export default{
getStartTime:(state) => state.startTime,
getEndTime:(state)=> state.endTime,
getSearchTitle:(state) => state.searchTitle,
}
action.js 異步提交娱据。 vuex中更改狀態(tài)只能是這樣蚪黑。
export default{
setStartTime({commit},startTime){
commit('SET_StartTime',startTime);
},
setEndTime({commit},endTime){
commit('SET_EndTime',endTime);
},
setSearchTitle({commit},searchTitle){
commit('SET_SearchTitle',searchTitle);
}
}
第三步，如何來用。
存值
this.$store.dispatch('setStartTime',startDate);
this.$store.dispatch('setEndTime',endDate);
取值
this.$store.getters.getSearchTitle;
