不同环境设置
场景
1 开发环境 http://localhost:3000
2 生产环境 http://localhost:4000
目的：
当环境更改后，能够读取对应的变量,不会因为环境的切换导致，程序员又得不停的更改代码
使用：
在项目的根目录(不是src)下 新建以下文件:(文件名都是关键词-固定的)
.env.development ---只要在开发环境中，程序才会执行读取 npm run serve
.env.production ---只要在生产环境中，程序才会执行读取 npm run build
.env --无论是开发环境还是生产环境，程序都会执行读取
语法:
1 定义：
NODE_ENV 和 VUE_APP_自定义变量
注释： #
NODE_ENV="开发环境"
VUE_APP_自定义变量1="值1"
VUE_APP_自定义变量2="值2"
2 引用： 在任意位置（js、vue等使用）
process.env.VUE_APP_自定义变量
自定义env文件
以上的.env.production和.env.development文件名和功能都是固定，如果需求中带有很多环境设置，那么就需要我们自己来定义文件了
语法：项目根目录中新建.env.xx
定义和使用的语法同上
配置：package.json:
"scripts": {
"自定执行名": "vue-cli-service serve/build --mode env文件名的后缀名",
Demo:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"serve-a":"vue-cli-service serve --mode a", 运行 npm run serve-a 开发环境
"build-b":"vue-cli-service build --mode b" 运行 npm run build-b 生产环境
},
VUEX
概念： vuex叫做状态管理模式(简称为状态机)
状态：数据/方法
作用： vuex本质就是前端中的一个独立的仓库，我们能够把属性、方法放进该仓库中，任何组件都能够随时的访问
场景：如果多个组件都在共享一个数据时，我们可以把数据放进仓库中
比如：登录成功后userInfo
路由安装
vue add vuex
结构
src
store
index.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//暴露仓库对象
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
}
})
main.js:
import Vue from 'vue'
import store from './store'
new Vue({
//注入
router,
store,
render: h => h(App)
}).$mount('#app')
Vuex 核心属性
state: 存储公共属性
getters: 存储公共的计算属性---用的不多
mutations: 存储公共方法，该方法只能是更改state的方法
actions: 存储公共方法,该方法存储的一般都是异步方法，比如登录、注册、查询学生
modules: 分模块
语法：
组件中：this.$store 来后去仓库对象
1 state 公共属性
store/index.js
export default new Vuex.Store({
state: {
name:"张三",
},
vue:
注意：组件一定要使用计算属性来获取仓具的数据，原因:如果今后仓库发生了改变，则组件也会同步
computed:{
name(){
return this.$store.state.name
}
},
2 getters 公共计算属性 —了解
store/index.js
state: {
n1:1,
n2:2
},
getters: {
//第一个参数就是state对象
sum(state){
return state.n1+state.n2
}
},
vue:
computed:{
sum(){
return this.$store.state.n1+this.$store.state.n2
}
},
3 mutations 存储方法 --commit
该属性定义的方法是用来修改state数据的方法，也是修改state数据的唯一手段
store/index.js
state: {
name:"张三",
},
mutations: {
//参:1:state对象
//参数2：接受的参数
CHANGE_NAME(state,data){
state.name=data
}
},
vue:
this.$store.commit("CHANGE_NAME",this.t)
练习:
1 在仓库中定义一个name
2 在组件中渲染name
3 组件能够通过文本框和按钮来修改name，修改后，组件也必须要同步
4 仓库中定义n1,n2以及计算属性sum,组件中渲染sum，也能够通过文本框和按钮修改n1和n2
4 actions 存储方法 --dispatch
该属性中定义的方法一般都是公共的异步请求的方法
demo：为公共的stus赋值
方式1：组件中调用actions+mutations:—不推荐
store/index.js:
state: {
stus: []
},
mutations: {
CHANGE_STUS(state, data) {
state.stus = data
},
},
actions: {
//store :代表整个仓库对象 ==this.$store
//data:传递过来的参数
getStus(store, data) {
console.log(data);
return axios({
url: "/stus/getStus",
method: "get",
})
}
},
vue:
{{stus}}
computed:{
stus(){
return this.$store.state.stus
}
},
async created(){
//调用公共actions获取学生
let res=await this.$store.dispatch('getStus','测试数据')
console.log(res.stus);
//调用公共mutations来修改state
this.$store.commit("CHANGE_STUS",res.stus)
}
}
方式2：组件中调用actions
store/index.js:
state: {
stus: []
},
mutations: {
CHANGE_STUS(state, data) {
state.stus = data
},
},
actions: {
//store :代表整个仓库对象 ==this.$store
//data:传递过来的参数
async getStus(store, data) {
let res=await axios({
url: "/stus/getStus",
method: "get",
})
//调用mutations来设置数据的值
store.commit("CHANGE_STUS",res.stus)
}
},
vue:
{{stus}}
computed:{
stus(){
return this.$store.state.stus
}
},
created(){
//调用公共actions获取学生
this.$store.dispatch('getStus','测试数据')
}
}
辅助函数（语法糖）–只能用于组件中
我们可以通过更简便的语法来访问、操作仓库
mapState -- 写在computed中
mapGetters -- 写在computed中
mapMutations --写在methods中
mapActions --写在methods中
语法：
...mapXxxx(['仓库中的属性或方法'])
记住：仓库中的属性和方法不要和本身组件的属性和方法重名
使用：
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
computed: {
...mapState(['name','stus']),
...mapGetters(['sum'])
},
methods: {
...mapMutations(['CHANGE_NAME']),
...mapActions(['getStus']),
},
demo:
vue:
<template>
<div>
<h1>Home2</h1>
{{name}}--{{sum}}
<hr>
<button @click="change">change</button>
<hr>
{{stus}}
</div>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
computed: {
...mapState(['name','stus']),
...mapGetters(['sum'])
},
methods: {
...mapMutations(['CHANGE_NAME']),
...mapActions(['getStus']),
change(){
this.CHANGE_NAME('李四')
}
},
created() {
this.getStus();
},
};
</script>
<style>
</style>
store/index.js:
import api from '@/http/api'
import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../http/axios.js'
Vue.use(Vuex)
//暴露仓库对象
export default new Vuex.Store({
state: {
name: "张三",
n1:1,
n2:2,
stus: []
},
getters: {
sum(state) {
return state.n1 + state.n2
}
},
mutations: {
//参:1:state对象
//参数2：接受的参数
CHANGE_NAME(state, data) {
state.name = data
},
CHANGE_STUS(state, data) {
state.stus = data
},
},
actions: {
//store :代表整个仓库对象 ==this.$store
//data:传递过来的参数
async getStus(store, data) {
let res=await axios({
url: "/stus/getStus",
method: "get",
})
//调用mutations来设置数据的值
store.commit("CHANGE_STUS",res.stus)
}
},
modules: {
}
})
5 modules 模块化
仓库也可以按照模块划分，便于管理
步骤：
1 新建模块
在 store/新建modules目录，然后在该目录下新建模块名，比如stus.js等
2 编辑index.js
import stus from './modules/stus.js'
//暴露仓库对象
export default new Vuex.Store({
modules: {
stus
}
})
3 编辑stus.js
export default {
//命名空间
//state在不同模块中是可以取重复名字的，但是
// getters、mutations、actions以上三个属性就算在不同模块中也不能取重复名字，否则报错，因此就需要
//在每一个模块中添加namespaced:true,程序就会通过路径来区分，继而我们可以在不同模块能够取相同名字
namespaced:true,
state:{},
getters:{},
mutations:{},
actions:{}
}
使用模块化之后的仓库
情况1：在组件中通过辅助函数使用
vue:
import {createNamespacedHelpers} from 'vuex'
//参数就是模块名
let {mapState,mapActions}=createNamespacedHelpers("stus")
export default {
computed: {
...mapState(['name','stus'])
},
methods: {
...mapActions(['getStus']),
},
一个组件中也能够使用多个模块,比如stus和clas
import {createNamespacedHelpers} from 'vuex'
//参数就是模块名
let {mapState:mapState_stus,mapActions:mapActions_stus}=createNamespacedHelpers("stus")
let {mapState:mapState_clas,mapActions:mapActions_clas}=createNamespacedHelpers("clas")
export default {
computed: {
...mapState_stus(['name','stus']),
...mapState_clas(['clas'])
},
methods: {
...mapActions_stus(['getStus']),
...mapActions_clas(['getClas']),
},
情况2：在js中使用
操作state 仓库对象.state.模块.属性
操作getters 仓库对象.getters.模块.属性
操作mutations 仓库对象.commit("模块/mutations中的方法名",参数)
操作actions 仓库对象.dispatch("模块/actions中的方法名",参数)
|