Vue之vuex和axios

Vuex :

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

状态: 可以理解为在data中需要共享给其他组件使用的部分.

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

  1. Vuex的状态存储是响应式的.

    当vue组件从store中读取状态的时候, 若store中的状态发生改变, 那么相应的组件也会得到高效更新.

  2. store中的状态不能直接进行改变, 改变store中的状态的唯一途径就是显示的提交(commit)mutation. 这样使得我们可以方便的跟踪每一个状态的变化, 从而让我们能够实现一些工具来帮助我们更好的了解我们的应用.

注意事项 :

  仓库中的数据建议都放在计算属性下



安装使用Vuex:

安装: 

  npm install vuex

配置:

  导入vuex: import vuex from "vuex"

  使用vuex: vue.use(vuex)

// main.js
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import vuex from ‘vuex‘

Vue.use(vuex)

Vue.config.productionTip = false

const store = new vuex.Store({
    state: {
      show: false,
    }
});

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
});

使用方法一

// 为了方便维护,我们通常把在src下面新建一个store文件夹,
// 然后在里面新建一个index.js
import Vue from ‘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"

Vue.config.productionTip = false;

new Vue({
  el: ‘#app‘,
  router,
  store,
  components: { App },
  template: ‘<App/>‘
});

使用方法二



State:

简而言之, state是保存我们data中需要共享的数据的

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

实例化仓库:

new vuex.Store({
    state: {},      //共享的数据
    gettres:{},    //可以进行二次加工
    mutations:{}    //更改vuex中的store的状态的方法
})

在Vue实例对象中注册:

new Vue({
    el: "#app",
    store,
})

获取仓库中的数据:

  this.$store.state.xxx

  this.$store.getters.xxx

// 创建一个组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count(){
      return this.$store.state.count
    }
  }
};

组件中获取vuex的状态



Getter:

有时候需要从store中的state中派生出一些状态, 例如对数据进行简单的计算.

并且很多组件都需要用到此方法, 我们要么复制这个函数, 要么抽取到一个公共函数, 多处导入.

vuex提供了更加方便的方法, getter, 它就像计算属性一样, getter的返回值会根据它的依赖被缓存起来, 只有他的依赖发生改变时, 才会重新计算.

Getter会接受start作为其第一个参数:

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
    }
  },

});

Getter会接受getter作为其第二个参数:

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都有一个字符串的事件类型, 和一个回调函数handler.

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

这个方法就是更改状态的方法, 他会接受state为第一个参数, 后面接收其他参数.

Mutation的基本使用:

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组件也会更新.

  这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项:

    1. 最好提前在你的store中初始化好所需要的属性

    2. 当对象需要添加属性时, , 应该使用:

      Vue.set(obj, "newProp", 123)

      以新对象代替老对象 start.obj = {...state.obj, newProp: 123}



axios的简单使用:

基于Promise的HTTP请求客户端, 可以同时在浏览器和node.js使用.

实现ajax技术的工具

安装:

  npm install axios

配置:

  导入: import axios from "axios"

  在vue原型链中加入方法: vue.prototype.$axios = axios

// main.js
import axios from "axios"

Vue.prototype.$axios = axios

// 组件中
methods: {
     init () {
        this.$axios({
             method: "get",
             url: "/user"
        })
    },
};

基本使用:

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)
            })
          }
},

原文地址:https://www.cnblogs.com/dong-/p/9966198.html

时间: 2024-11-05 01:02:56

Vue之vuex和axios的相关文章

Vue 使用 Vuex 和 axios 获取接口数据

修改原型链 //main.js import axios from 'axios'; Vue.prototype.$ajax = axios; //修改原型链 // .vue文件 methods:{ getData(){ this.$ajax.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity') .then(res => { console.log(res) }).catch(err => { con

Vuex以及axios

Vuex简介 vuex是一个专门为Vue.js设计的集中式状态管理架构. 状态? 我们把它理解为在data中需要共享给其他组件使用的部分. Vuex和单纯的全局对象有以下不同: 1.Vuex 的状态存储是响应式的.当vue组件从store中读取状态的时候, 若store中的状态发生变化,那么相应的组件也会相应的得到高效更新. 2.你不能直接改变store中的状态.改变store中的状态的唯一途径就是显示的 提交(commit)mutation.这样使得我们可以方便的跟踪每一个状态的变化, 从而让

Vuex以及axios的使用

Vuex简介 vuex是一个专门为Vue.js设计的集中式状态管理架构. 状态? 我们把它理解为在data中需要共享给其他组件使用的部分. Vuex和单纯的全局对象有以下不同: 1.Vuex 的状态存储是响应式的.当vue组件从store中读取状态的时候, 若store中的状态发生变化,那么相应的组件也会相应的得到高效更新. 2.你不能直接改变store中的状态.改变store中的状态的唯一途径就是显示的 提交(commit)mutation.这样使得我们可以方便的跟踪每一个状态的变化, 从而让

438 vuex:基本使用,传参,vue和vuex的配合使用,Vue脚手架3,使用Vuex改版 TodoMVC,actions,mapGetters,mapMutations,mapActions

一 .Vuex的介绍 vuex 是什么? 状态管理工具 状态:即数据, 状态管理就是管理组件中的data数据 Vuex 中的状态管理工具, 采用了 集中式 方式统一管理项目中组件之间需要通讯的数据 [共享的数据.] [看图] 如何使用 最佳实践 : 只将组件之间共享的数据放在 vuex 中, 而不是将所有的数据都放在 vuex 中 也就是说: 如果数据只是在组件内部使用的, 这个数据应该放在组件中, 而不要放在 vuex vuex 中的数据也是 响应式 的, 也就是说: 如果一个组件中修改了 v

【09】Vue 之 Vuex

9.1. 引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示: 9.2. 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需要通过事件总线的方式

requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?

在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天的研究却被我搞成了研究了一周,这拖延症... 闲话少数,进入正题 一.示例代码说明 代码结构说明: modules(存放的为组件,主要是模板与Js对象分成两个文件来写) route:测试子路由的组件 title:就是一个简单的显示文字的组件 app.js:核心类,提供vue的创建.以前modules

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 项目地址:https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && np

vue学习---vuex之简介

每一个 Vuex 应用的核心就是 store(仓库)."store" 基本上就是一个容器,它包含着你的应用中大部分的状态(state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的状态存储是响应式的.当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新. 你不能直接改变 store 中的状态.改变 store 中的状态的唯一途径就是显式地提交(commit) mutations. 下面就实现一个计数功能简介

vue实例讲解之axios的使用

本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm install axios --save-dev 2.页面中引入axios import axios from 'axios' 3.为了方便使用我们将axios挂到vue.prototype.$http这个原型上 Vue.prototype.$http = axios 4.在页面中直接调用axio