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原理图: