Vue快速学习

axios安装及使用

网站文档地址:https://www.kancloud.cn/yunye/axios/234845

1.npm安装 cnpm install axios

2.// 在main.js里面引入axios

import Axios from 'axios'

3.// 将axios 挂载到Vue原型上,这样全局的组件都有该方法了

Vue.prototype.$https = Axios;

4.// Axios全局配置基本url(当然也可以不配置),配置后后面就直接写之后的url即可,会默认帮你拼接

Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/';

methods:{

        // 获取课程分类

        get_category_list(){

          // 调用axios的get方法获取数据

            this.$https.get('course_sub/category/list/')

              // 这里注意this指向

              .then((response) => {

                // 如果状态正常,则赋值给category_list

                  if (response.data.error_no === 0){

                    this.category_list = response.data.data

                  }

              })

              .catch(function (error) {

                  console.log(error)

              })

        }

      },

      created(){

        // 调用课程分类方法

        this.get_category_list()

      }

vuex安装和简单使用

vuex中，有默认的五种基本的对象：

state：存储状态（变量）

getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()

mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。

actions：异步操作。在组件中使用是$store.dispath('')

modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

1.安装vuex    npm i vuex -S

2.可以在src目录下创建一个vuex文件夹,建一个store,js文件

store.js文件

import Vue from 'vue'

import Vuex from 'vuex'

// 引入vuex并且使用vuex

Vue.use(Vuex)

// 存储变量count

const state = {

  count:0

}

// mutations 里面放置的是我们操作state对象属性的方法,还属于同步操作

const mutations = {

  // mutations里面的参数，第一个默认为state，接下来的为自定义参数

  addCount(state, n) {

    return (state.count += n)

  },

  reduceCount(state, n){

    return (state.count -= n)

  }

};

// actions是异步操作,有两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数

const actions = {

  actionAddCount(context, n){

    return context.commit('addCount',n)

  },

  actionReduceCount(context, n){

    return context.commit('reduceCount',n)

  },

};

// 通过Vuex的方法Store返回

export default new Vuex.Store({

  state,

  mutations,

  actions

})

main.js 引入并挂载store

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './vuex/store'  // 引入store

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  store, // 记得挂载

  components: { App },

  template: '<App/>'

})

HelloWorld.vue里面

<template>

  <div class="hello">

    <!--获取count的值-->

    <h2>{{ $store.state.count }}</h2>

    <div>同步操作

      <div>

        <button @click='addClick(1)'>增加</button>

        <button @click='reduceClick(1)'>减少</button>

      </div>

    </div>

    <div>异步操作

      <div>

        <button @click='actionAddClick(1)'>异步增加</button>

        <button @click='actionReduceClick(1)'>异步减少</button>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {}

  },

  methods:{

    addClick(n){

      // 通过commit方法调用addCount来进行加减n操作

      this.$store.commit('addCount',n);

    },

    reduceClick(n){

      this.$store.commit('reduceCount',n);

    },

    actionAddClick(n){

      // 通过dispatch方法调用actionAddCount,然后actionAddCount再通过commit方法调用addCount进行加减

      this.$store.dispatch('actionAddCount',n);

    },

    actionReduceClick(n){

      this.$store.dispatch('actionReduceCount',n);

    },

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

</style>

vuex原理图:

巴特西

Vue快速学习_第五节

axios安装及使用

vuex安装和简单使用

最新文章

热门文章