Vuex以及axios

Vuex简介

vuex是一个专门为vue.js设计的集中式状态管理架构。

状态: 我们把它理解为在data中需要共享给其他组件使用的部分。

Vuex和单纯的全局对象有以下不同:

  1,Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,

    若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。

  2,我们不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的提交

   (commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化,

    从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

安装使用vuex

  npm i vuex

  vuex的使用一

  vuex的使用二 

State

state是保存我们data中需要共享的数据。

由于Vuex的存储是响应式的,从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。

Getter

getter它就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,只有它的依赖发生改变时,才会重新计算。

获取仓库store中的数据

  this.$store.state.xxxx  

  this.$store.getters.xxxx

Mutation

更改Vuex中的store中的状态的唯一方法是提交mutation。

每个mutation都有一个字符串的事件类型(type),和一个回调函数handler。

也就是说我们要触发mutation中定义的方法(type),然后才会执行这个方法(handler)。

  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技术的工具

基本使用

  get请求

  post请求

  发送多个请求

  清晰版

  前后端的接通

    后端设计一个接口

    前端通过axios发送请求拿到数据

    跨域问题

posted on   窮山霧繞(静妙)  阅读(252)  评论(0编辑  收藏  举报

编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
< 2025年1月 >
29 30 31 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 28 29 30 31 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示