• Vuex以及axios


    Vuex

    简介

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

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

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

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

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

    2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的

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

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

    安装使用vuex

      --  npm install 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/>'
    });
    vuex的使用一
    // 为了方便维护,我们通常把在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/>'
    });
    vuex的使用二

    State

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

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

    this.$store.state.count

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

    Getter

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

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

    我们vuex提供了更加方便的方法,getter ,它就像计算属性一样,getter的返回值会根据它的依赖被

    缓存起来,只有它的依赖发生改变时,才会重新计算。

    Getter会接收state作为其第一个参数:

    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也可以接收getters为第二个参数:

    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
        }
      },
    
    });
    Getter使用

    Mutation

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

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

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

    这个方法就是我们更改状态的地方,它会接收state为第一个参数,后面接收其他参数:

    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基本使用

    Mutation需要遵守Vue的响应规则

    既然vuex中的store中的状态是响应式的,那么当我们状态变更时,监视状态的vue组件也会更新。

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

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

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

          --  Vue.set(obj, 'newProp', 123)

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

    axios

    简单使用

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

    使用npm安装axios

      -- npm install axios -D

    基本的配置

    // main.js
    import axios from "axios"
    
    Vue.prototype.$axios = axios
    
    // 组件中
    methods: {
         init () {
            this.$axios({
                 method: "get",
                 url: "/user"
            })
        },
    };
    axios的基本配置

    基本的使用

    test(){
              this.$axios.get(this.$store.state.apiList.course,{
                params: {
                  id: 123,
                }
              }).then(function (response) {
                // 请求成功回调函数
              }).catch(function (response) {
                // 请求失败的回调函数
              })
    }
    get请求
    test(){
              this.$axios.post(this.$store.state.apiList.course,{
                  course_title: "Python",
                  course_price: "19.88"
              }).then(function (response) {
                // 请求成功回调函数
              }).catch(function (response) {
                // 请求失败的回调函数
              })
    }
    post请求
    function getCourse(){
              return this.$axios.get('/course/12')
            }
    function getCourse_all() {
              return this.$axios.get('/course')
            }
    this.$axios.all([getCourse_all(),getCourse()])
              .then().catch()
    发送多个并发请求
    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.request
  • 相关阅读:
    汉诺塔
    美丽联合2018前端
    游览器
    python多线程实现
    cuda toolkit
    编译器,解释器及混合编译
    大疆无人机
    SaaS PaaS IaaS mes
    CNN中权值共享的理解
    最近动作项目心得
  • 原文地址:https://www.cnblogs.com/peng104/p/10105986.html
Copyright © 2020-2023  润新知