前端学习十一(vuex、项目编译)
一、VUEX(个人理解是多个vue组件数据共享时使用)
vuex文档: https://next.vuex.vuejs.org/
1、环境准备
(1)安装依赖 npm install vuex --save
(2)安装插件 vue ui中安装插件vuex (会新建一个store的文件夹,且main.js也会自动导入store)
2、vuex的核心概念(state、getters、mutations、actions)
其实文档挺详细的,下面主要是对vuex的4个核心概念比较常用的内容介绍(modules主要是大型项目的时候使用,就不说了)
(1)src/store文件夹下index.js文件示例
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 用来定义全局的数据(多组件共用的数据) 不能双向绑定,修改只能通过mutations state: { }, // 定义全局的计算属性 getters: { }, // 定义全局的方法(不能定义异步的方法),也只有这里能修改state中的数据 mutations: { }, // 定义全局的异步方法(比如请求接口获取全局数据的方法),只能通过操作mutations来修改state actions: { }, modules: { } })
练习时的文件内容

import Vue from 'vue' import Vuex from 'vuex' import req from '../api/req.js' Vue.use(Vuex) export default new Vuex.Store({ // 用来定义全局的数据(多组件共用的数据) 不能双向绑定,修改只能通过mutations state: { projects: ['1', '2', '3'], name: 'vuex中的name字段', a: 2, b: 5 }, // 定义全局的计算属性 getters: { c(state) { return state.a * state.b } }, // 定义全局的方法(不能定义异步的方法),也只有这里能修改state中的数据 mutations: { addNum(state) { state.a++ }, // 修改state.projects的方法,给下面异步方法用 updateProjects(state, data) { state.projects = data } }, // 定义全局的异步方法(比如请求接口获取全局数据的方法),只能通过操作mutations来修改state actions: { async getProjects(content) { const r = await req.getProjects() // console.log(r.data.results) content.commit('updateProjects', r.data.results) } }, modules: { } })
(2)vue组件中的使用的2种方式
<!-- 使用vuex中定义的数据 --> <h1>{{ $store.state.name }}</h1> <!-- 全局计算属性的使用 --> <h1>a*b={{ $store.getters.c }}</h1> <!-- 调用mutations中的方法 --> <button @click="$store.commit('addNum')">+</button> <!-- 调用actions中的方法 --> <button @click="$store.dispatch('getProjects')">获取项目</button>
<script> import { mapState, mapGetters, mapMutations,mapActions } from 'vuex' export default { methods: { // 调用全局方法的另一种形式 ...mapMutations(['addNum']), ...mapActions(['addNum']), }, computed: { // 通过计算属性 返回vuex中定义的全局数据 // name() { // return this.$store.state.name // }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState(['name', 'projects', 'a', 'b']), ...mapGetters(['c']), } } </script>
练习时的文件内容

<template> <div> <!-- 使用vuex中定义的数据 --> <h1>{{ name }}</h1> <h1>{{ $store.state.name }}</h1> <h1>{{ projects }}</h1> <!-- 全局计算属性的使用 --> <h1>a={{ a }}</h1> <h1>a={{ b }}</h1> <h1>a*b={{ $store.getters.c }}</h1> <h1>{{ c }}</h1> <!-- 调用全局的方法修改state中的数据 --> <button @click="$store.commit('addNum')">+</button> <br> <button @click="addNum">+</button> <!-- 调用actions中的方法 --> <button @click="$store.dispatch('getProjects')">获取项目</button> <br> <button @click="getProjects">获取项目</button> </div> </template> <script> import { mapState, mapGetters, mapMutations,mapActions } from 'vuex' export default { data() { return {} }, methods: { // 调用全局方法的另一种形式 ...mapMutations(['addNum']), ...mapActions(['addNum']), }, components: {}, mounted() {}, computed: { // 通过计算属性 返回vuex中定义的全局数据 // name() { // return this.$store.state.name // }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState(['name', 'projects', 'a', 'b']), ...mapGetters(['c']), }, created(){} } </script> <style scoped> </style>
二、编译运行
前提:安装了node.js、create-vue脚手架工具
npm install报错 certificate has expired
1、取消ssl验证: npm config set strict-ssl false 这个方法一般就可以解决了。 2、更换npm镜像源: npm config set registry http://registry.cnpmjs.org npm config set registry http://registry.npm.taobao.org
npm run serve报错 Error: error:0308010C:digital envelope routines::unsupported
主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,nodeJs v17 之前版本没影响,但 V17 和之后版本会出现这个错误
新增 SET NODE_OPTIONS=--openssl-legacy-provider "scripts": { "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build" }
三、修改端口
在项目根目录下新建vue.config.js文件
module.exports = { devServer: { port: 3000 } }
一个只会点点点的测试,有疑问可以在测试群(群号:330405140)问我