Vuex以及axios
Vuex简介
vuex是一个专门为vue.js设计的集中式状态管理架构。
状态: 我们把它理解为在data中需要共享给其他组件使用的部分。
Vuex和单纯的全局对象有以下不同:
1,Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,
若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。
2,我们不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的提交
(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化,
从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。
安装使用vuex
npm i vuex
vuex的使用一
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | / / main.js import Vue from 'vue' import App from 'App' import router from 'router' import vuex from 'vuex' / / 使用vuex Vue.use(vuex) / / 实例化仓库store const store = new vuex.Store({ state: { show: false, }, getattrs: { }, mutations: {}, }); new Vue({ el: '#app' , router, store, components: { App }, template: '<App / > }); |
vuex的使用二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | / / 为了方便维护,我们通常把在src下面新建一个store文件夹, / / 然后在里面新建一个index.js import Vue from 'vue' / / Vue是自定义的名称 import Vue_x from 'vuex' Vue.use(Vue_x); export default new Vue_x.Store({ state: { show: false, }, }); / / 那么main.js要改成 import Vue from 'vue' import App from 'App' import router from 'router' import store from 'store' new Vue({ el: '#app' , router, store, components: { App }, template: '<App / > }); |
State
state是保存我们data中需要共享的数据。
由于Vuex的存储是响应式的,从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。
Getter
getter它就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,只有它的依赖发生改变时,才会重新计算。
获取仓库store中的数据
this.$store.state.xxxx
this.$store.getters.xxxx
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import Vue from 'vue' import Vue_x from 'vuex' Vue.use(Vue_x); export default new Vue_x.Store({ state: { count: 20 , }, / / 通过this.$store.getters.my_func getters: { my_func: function(state) { return state.count * 2 }, / / 通过this.$store.getters.my_func_count my_func_count: function(state,getters){ return getters.my_func.length } }, }); |
Mutation
更改Vuex中的store中的状态的唯一方法是提交mutation。
每个mutation都有一个字符串的事件类型(type),和一个回调函数handler。
也就是说我们要触发mutation中定义的方法(type),然后才会执行这个方法(handler)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import Vue from 'vue' import Vue_x from 'vuex' Vue.use(Vue_x); export default new Vue_x.Store({ state: { count: 20 , }, / / 需要通过this.$store.commit( 'increment' , 10 ) mutations: { increment (state, n) { / / 变更状态 state.count + = n } } }); |
Mutation需要遵守Vue的响应规则
既然vuex中的store中的状态是响应式的,那么当我们状态变更时,监听状态的vue组件也会更新。
这就意味着vue中的mutation也需要与使用vue一样遵守一些注意事项:
1,最好提前在你的store中初始化好所有的所需要的属性
2,当对象需要添加属性时,你应该使用
Vue.set(obj, 'newProp',123)
以新对象代替老对象 state.obj = { ...state.obj,newProp:123 }
改变仓库中的数据
-- 组件向仓库提交修改事件
this.$store.commit('事件名称',data)
-- 在仓库的mutations中
mutations: {
'事件名称': function (state, data) {
修改state中的数据
}
}
-- 注意计算属性
仓库中数据建议都放在计算属性中
axios的简单使用
基于promise的HTTP请求客户端,可以同时在浏览器和node.js使用。
使用npm安装axios
npm i axios -D
基本的配置
实现ajax技术的工具
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | / / main.js import axios from 'axios' <br> / / 在vue的原型链中加入方法 Vue.prototype.$axios = axios / / 组件中 methods: { init() { this.$axios({ method: 'get' , url: 'user' , }) }, }; |
基本使用
get请求
1 2 3 4 5 6 7 8 9 10 11 | test() { this.$axios.get(this.$store.state.apiList.course,{ params: { id : 123 , } }).then(function(response){ / / 请求成功回调函数 }).catch(function(response){ / / 请求失败的回调函数 }) } |
post请求
1 2 3 4 5 6 7 8 9 10 11 | test() { this.$axios.post(this.$store.state.apiList.course,{ params: { id : 123 , } }).then(function(response){ / / 请求成功回调函数 }).catch(function(response){ / / 请求失败的回调函数 }) } |
发送多个请求
1 2 3 4 5 6 7 8 | function getCourse(){ return this.$axios.get( '/course/12' ) } function getCourse_all() { return this.$axios.get( '/course' ) } this.$axios. all ([getCourse_all(),getCourse()]) .then().catch() |
清晰版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | methods: { init(){ var that = this this.$axios.request({ url: that.$store.state.apiList.course, method: 'get' }).then(function (data) { if (data.status = = = 200 ){ that.courseList = data.data } }).catch(function (reason) { console.log(reason) }) } }, |
前后端的接通
后端设计一个接口
前端通过axios发送请求拿到数据
跨域问题
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥