vue Vuex axios 相关资料

vue中文文档

使用Vuex详解

vue-router 基本使用

vue全局使用axios的方法

• vue 父子组件事件之间的传递

  • 1.在父组件定义一个自定义事件:leftClick

  <Nav
    v-on:leftClick="leftClick"
  ></Nav>
  

  • 2.子组件调用内建的$emit()方法 并传入事件名称来触发一个事件:leftClick

  <span class="leftBtn" v-on:click="$emit('leftClick')">left</span>
  

• Vuex的基本使用

  • npm install vuex
  • 在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

  import Vuex from "vuex";
  import Vue from 'vue';
  
  
  Vue.use(Vuex)
  const store = new Vuex.Store({
     state:{
         count: 1,
         nameStoreData:{
             name:'asdsadsadasdas'
         }
     },
     mutations: {
         //自定义触发mutations里函数的方法，state与store 实例具有相同方法和属性
         //组件使用commit来触发 mutations
         increment (state) {
             state.count++;
         }
     },
     actions:{
         //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
         //组件使用dispatch来触发 actions
         hideFooter(context) {  
             context.commit('increment','num');
         },
     },
     
  })
  export default store
  

  • 接下来，在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了：

  import Vue from 'vue'
  import App from './App.vue'
  import store from "./store/index";
  Vue.config.productionTip = false
  
  new Vue({
   render: h => h(App),
   store
  }).$mount('#app')