vue中文文檔

使用Vuex詳解

vue-router 基本使用

vue全局使用axios的方法

• vue 父子組件事件之間的傳遞

  • 1.在父組件定義一個自定義事件:leftClick

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

  • 2.子組件調(diào)用內(nèi)建的$emit()方法 并傳入事件名稱來觸發(fā)一個事件:leftClick

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

• Vuex的基本使用

  • npm install vuex
  • 在src文件目錄下新建一個名為store的文件夾，為方便引入并在store文件夾里新建一個index.js,里面的內(nèi)容如下:

  import Vuex from "vuex";
  import Vue from 'vue';
  
  
  Vue.use(Vuex)
  const store = new Vuex.Store({
     state:{
         count: 1,
         nameStoreData:{
             name:'asdsadsadasdas'
         }
     },
     mutations: {
         //自定義觸發(fā)mutations里函數(shù)的方法，state與store 實例具有相同方法和屬性
         //組件使用commit來觸發(fā) mutations
         increment (state) {
             state.count++;
         }
     },
     actions:{
         //自定義觸發(fā)mutations里函數(shù)的方法，context與store 實例具有相同方法和屬性
         //組件使用dispatch來觸發(fā) 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')