1.创建store仓库
- 根目录下创建store文件夹, 举例创建user.js文件:store/user.js
user.js 创建模块化
1.引入 request 用于接口调用
import request from '../service/service';
2.定义state数据
const state = () => ({
userList: []
});
const getters = {};
3.修改state数据,一般方法名大写加下划线
const mutations = {
SET_USER_LIST(state, value) {
state.userList = value;
}
};
4.创建接口调用
const actions = {
async getUserList({ commit }, data) {
return request({
protocol: '接口路径',
options: data,
method: 'get',
});
}
};
5. 抛出
**单个模块中通过添加 namespaced:true 的方式使其成为带命名空间的模块**
export default {
namespaced: true,
state,
getters,
actions,
mutations
};
2.index.js
- store文件夹下创建index.js store/index.js
1.引入vue、vuex
import Vue from 'vue';
import Vuex from 'vuex';
2.引入创建好的user模块
import user from './user';
3.vuex挂载到vue
Vue.use(Vuex);
4.初始化具体的store对象
const store = new Vuex.Store({
state: {
projectId: ''
},
getters: {},
mutations: {},
actions: {},
modules: {
user
}
});
5.抛出store
export default store;
3.全局main.js引入
import store from './store'
window.app = new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
4.页面使用
<template>
<div>项目id:{{projectId}}</div>
</template>
<script>
1.引入vuex方法
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
data() {
return {}
}
2. 计算获取state中projectid, 相当于vue data中的数据, methods方法中可以直接this.projectId获取
computed: {
...mapState({
projectId: state => state.projectId
})
},
methods: {
3.获取mutations、actions对应方法
...mapMutations('user', ['SET_USER_LIST']),
...mapActions('user', ['getUserList']),
4.使用mapActions接口获取对应数据、使用mapMutations改变user.js/state中userList值
FunctionName() {
this.getUserList(params).then(res => {
const { data } = res.data;
if (data) {
const arr = data.list || [];
this.SET_USER_LIST(arr);
}
})
}
}
}
</script>