Vuex、axios

最新推荐文章于 2024-07-30 10:56:44 发布

Lyn2693282567

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量220

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Lyn2693282567/article/details/126294092

版权

阶段四：vuex

vuex: 全局状态管理器适用于任意组件关系数据共享

安装：
npm install vuex@3 -S （建议安装项目的时候直接勾选中无需手动安装 uniapp默认已有无需安装）

vue2 -> vuex3
vue3 -> vuex4

https://v3.vuex.vuejs.org/zh/

集成：
store/index.js :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {

},
mutations: {

},
actions: {

}
})

main.js :

import store from './store'
new Vue({
store
......... 其他代码 ........
}).$mount('#app')

---------------------------------------
state:
方式一：模板中直接输出 uniapp不可以有兼容问题小程序中不能正常显示不建议
{{$store.state.count}}

方式二：手写计算属性
count() {
return this.$store.state.count
}

方式三：利用vuex 准备的 mapState 辅助函数；在computed中使用：
...mapState(['testa', 'testb', 'testc']), // 本地计算属性名和state变量同名用数组
...mapState({ // 本地计算属性名自定义和state名不一样用对象
mycount : 'count'
})

如果你的计算属性有特殊业务，请使用方式二手戳。

mutaions:
方式一：自行调用
this.$store.commit('countJia', num)

方式二：利用vuex 准备的 mapMutations 辅助函数；在methods中使用：
...mapMutations({myjia : 'countJia'}),
...mapMutations(['countJian']),

actions:
方式一：自行调用
this.$store.dispatch('syncCountJia', num)

方式二：利用vuex 准备的 mapActions 辅助函数；在methods中使用：
...mapActions(['syncCountJia', 'syncCountJian'])

getters:
方式一：模板中直接输出 uniapp不可以有兼容问题小程序中不能正常显示不建议
{{$store.getters.countPf}}

方式二：手写计算属性
countPf() {
return this.$store.getters.countPf
}

方式三：利用vuex 准备的 mapGetters 辅助函数；在computed中使用：
...mapGetters(['countPf']) 可以是数组和对象

-----------------------------------------
npm i -S axios

url : 统一资源定位符

https://www.baidu.com:8080/a/b/xx.php?参数名=值&参数名=值
协议://域名或ip:端口/目录/文件名?参数名=值&参数名=值

http 80
https 443

请求方式：GET POST PUT DELETE

参数：数据

请求头：键值对

import axios from 'axios'

axios.get(url地址)
axios.get(url地址?参数名=值&参数名=值)
axios.get(url地址, {
params : {
参数名：值,
参数名: 值
}
})

axios.get(url地址, {
params : {
参数名：值,
参数名: 值
},
headers: {
头名: 值
}
})

axios.post(url地址， {参数名:值, 参数名:值})

let token = sessionStorage.getItem('token')
axios.post(url地址， {参数名:值, 参数名:值}, {
headers: {
Authorization: 'Bearer ' + token
}
})

axios.get(url地址).then(result => {
// 表示请求成功了 result参数就响应数据

})

npm i -S axios
npm i -S nprogress 发请求的时候可以做进度条

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 请求拦截和响应拦截
const request = axios.create({
baseURL : 'http://demo4.wooadmin.cn',
timeout: 50000
})
request.interceptors.request.use((config) => {
NProgress.start();
// 请求拦截 -- 每次发送请求的时候都可以执行到这里
let token = window.sessionStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, (err) => {
NProgress.done();
Promise.reject(err);
})

request.interceptors.response.use((response) => {
NProgress.done();
// 响应拦截 -- 每次响应回来的时候都可以执行到这里的代码

return response.data ? response.data :response;
}, (err) => {
NProgress.done();
//404 500

//console.log(err.response.status);
Promise.reject(err);
})

// axios 原始的get方法代码赋值给 originGet
const originGet = request.get;

// 替换axios 原本的get
request.get = (url, params = {}, config = {}) => {
config.params = params;
return originGet(url, config)
}

export default request;

----------------------
// 把所有的接口都定义在一个模块中
import axios from "./request"

export default{
captcha(captcha_key) {
return axios.get('/api/Other/captcha',{captcha_key})
},
login(username, password,captcha_key, captcha) {
return axios.post('/api/UserLogin/login', {username, password,captcha_key, captcha})
},
getInfo() {
return axios.get('/api/UserLogin/getInfo')
}
}
-----------------------------------------
UI组件库：
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

cnpm i vant@latest-v2 -S
npm i babel-plugin-import -D

babel.config.js:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
---------------------------------------
项目：
(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
>(*) CSS Pre-processors

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

依赖：
cnpm i -S axios 发请求
cnpm i -S nprogress 发请求的时候可以显示进度条
cnpm i -S dayjs 用户日期格式化还有一个叫 moment的扩展也是用来处理时间的
cnpm i -S lodash (本次项目是否安装，自行考虑) 很多开发中经常遇见的使用函数、方法

cnpm i vant@latest-v2 -S Vant UI组件库
cnpm i babel-plugin-import -D 按需加载

https://blog.csdn.net/weixin_45799605/article/details/113310110
移动端适配针对移动端项目才考虑
cnpm i lib-flexible -S
cnpm i postcss-pxtorem@5.1.1 -D

babel.config.js:

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}

poastcss.config.js:

module.exports = {
plugins: {
"postcss-pxtorem": {
// 设计稿 375:37.5
// 设计稿：750:75
// Vant 是基于 375
rootValue: 37.5,
propList: ["*"]
}
}
}

main.js:

import 'lib-flexible/flexible' //加一行导入

public/index.html
把原来的那行替换掉：

dayjs简单用法参考：
import dayjs from 'dayjs'
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');

目录结构，建议的添加：

https :
request.js 用于请求和响应拦截
index.js 所有的接口都应该定义在该文件
你的每个组件中就可以通过 this.$api 获取到所有接口方法了

utils : 用于放公共模块库
arr.js 用于封装数组相关的数据处理方法
str.js 用于封装字符串相关的数据处理方法
mixins.js 全局混入

plugin:
index.js 插件用于处理全局性业务（全局组件注册、全局过滤器、全局指令、全局数据....）

less:
<style lang="less"></style>
<style lang="scss"></style>

变量：
@color:red;
.div1{
background: @color;
}