Vue快速学习_第五节

本是古典何须时尚 2021-11-17 10:28 309阅读 0赞

*  #### 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">
        
        <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>
    
    
    <style scoped>
    
    </style>

vuex原理图:

![1064304-20190717150944798-1903750765.png][]

转载于:https://www.cnblogs.com/leixiaobai/p/11201163.html

[1064304-20190717150944798-1903750765.png]: /images/20211116/3759439bdea446fbb462b82fea7a912f.png