vuex 进行封装
一.vuex状态管理
1.先创建一个vuex的js文件
2.接着在组件中使用store,获得/改变store中的数据和方法
3.在另一个组件中使用store,也可以获得/改变store中的数据和方法
4.也可以把里面的内容都单独封装,写成独立的js文件
action.js/getters.js/index.js/mutations.js...
二.vuex状态管理封装(user.js和subclass.js为例子)
1.创建一个user.js 和 一个subclass.js 接口异步获取通过actions,否则就是在getters方法中获取
user.js
import { getInfo } from '@/api/login'; const user = { state: { userInfo: {} }, mutations: { SET_USER_INFO: (state, userInfo) => { state.userInfo = userInfo; } }, actions: { // get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token) .then(res => { const data = res.data; commit('SET_USER_INFO', data); resolve(data); }) .catch(error => { reject(error); }); }); } } }; export default user;
subclass.js
const subclass = { state: { //这里放全局参数 currentSubclassId: '' }, mutations: { SET_SUBCLASS_ID: (state, currentSubclassId) => { state.currentSubclassId = currentSubclassId; } }, // 异步获取数据通过actions,通过dispatch 触发actions中的数据 //actions: { //commitSubclassId: ({ commit }, basicData) => //commit('SET_SUBCLASS_ID', basicData) //}, modules: { //给全局变量分组,所以需要写提前声明其他store文件,然后引入这里 } }; export default subclass;
2.创建一个getters.js
const getters = { userInfo: state => state.user.userInfo, saveSubclassId: state => state.subclass.currentSubclassId }; export default getters;
3.store下创建一个index.js
import Vue from 'vue'; import Vuex from 'vuex'; import getters from './getters'; import user from './modules/user'; import subclass from './modules/subclass'; Vue.use(Vuex); const store = new Vuex.Store({ modules: { user, subclass }, getters }); export default store;
4.使用 通过...mapGetters(['']) 获取数据
使用
6.改变vuex中的数据通过this.$store.commit('SET_SUBCLASS_ID', data)
触发action中的方法使用this.$store.dispatch('', data);