vue-cli3项目三之模块化vuex

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue-cli3项目三之模块化vuex，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2844字，纯文字阅读大概需要5分钟。

内容图文

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
今天对vuex中的module模块如何使用进行说明

调整
1、vue-quick-start\src目录下新建modules文件夹(主要用法存放分类的文件，可以进行区分)，在modules目录下新建user.js

import api from "@/api/user";

const user = {
  namespaced: true,
  state: {
    username: "",
    password: ""
  },

  mutations: {
    SET_USERINFO: (state, userInfo) => {
      state.username = userInfo.username ? userInfo.username : "";
      state.password = userInfo.password ? userInfo.password : "";
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        api
          .login(userInfo)
          .then(res => {
            if (res.code === 200) {
              commit("SET_USERINFO", res.userInfo);
            }
            resolve();
          })
          .catch(err => {
            reject(err);
          });
      });
    }
  }
};
export default user;

2、vue-quick-start\src目录下新建getters.js

const getters = {
  username: state => state.user.username,
  password: state => state.user.password
};
export default getters;

3、修改vue-quick-start\src目录下的store.js(主要进行一些引入，初始化操作)

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user"; // 引入user模块
import getters from "./getters";

Vue.use(Vuex);

const storeInstall = new Vuex.Store({
  modules: {
    user
  },
  getters
});

export default storeInstall;

4、调整vue-quick-start\src\views目录下的home.vue

<template>
  <div class="home">
    <h1>{{ title }}</h1>
    <span @click="login_">登录</span>
    <p class="myBorder">用户名: {{ username }} 密码 {{ password }}</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "home",
  data() {
    return {
      title: "首页",
      selects: []
    };
  },
  computed: {
    ...mapGetters(["username", "password"])
  },
  methods: {
    ...mapActions("user", ["Login"]),
    login_() {
      let loginParam = {
        username: "admin",
        password: "123456"
      };
      this.Login(this.$qs.stringify(loginParam));
    }
  }
};
</script>

服务端修改
1、修改服务端vueBack\back1目录下的app.js

var express = require("express");
var http = require('http');
var app = express();

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.get('/', function(req, res){
	res.send('Hello,vueTestServer'); //服务器响应请求
});

// 系统登录
app.post('/login', async function(req, res){
	res.send({
		code: 200,
		msg: "登陆成功",
		userInfo: req.body
	});
});

var httpServer = http.createServer(app);
const PORT = 9003;
const hostname = '0.0.0.0';
httpServer.listen(PORT, hostname, function() {
    console.log('vue-test Server is running on: https://'+hostname+':%s', PORT);
});

2、启动服务器(vueBack\back1目录下执行node app.js)

验证
1、运行项目(项目根目录下执行npm run serve)
2、浏览器访问http://localhost:8080/

3、点击 “登录”

说明：通过请求vuex中user模块action中的登录方法去异步请求接口，接口返回数据后调用mutation中的方法把用户信息存储在vuex中；当vuex中的username、password改变时，组件内值也随之变化(因被映射为组件内的计算属性)

目录结构

内容总结

以上是互联网集市为您收集整理的vue-cli3项目三之模块化vuex全部内容，希望文章能够帮你解决vue-cli3项目三之模块化vuex所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---