Vuex —— mapState、mapMutations、mapActions的使用

Juliet_xmj

已于 2023-03-06 11:21:46 修改

阅读量441

点赞数

分类专栏： vue vuex 文章标签： vue.js 前端 javascript

于 2023-03-06 11:04:09 首次发布

本文链接：https://blog.csdn.net/Juliet_xmj/article/details/129356523

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vuex

3 篇文章 0 订阅

订阅专栏

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) { // { commit } 一定要注意，不写会找不到actions方法
    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']), // 用来改变state中userList 的值
   	 	...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); // user.js/state中userList赋值
            	}
         	})
    	}
	}
}
</script>