11-vue_day09

day09內容

20. 狀態機基礎 vuex

    適用於中大型項目，比如在畢業設計項目中就顯得有點笨重。

    web開發技術棧【vue + vueRouter + vuex + axios + element-ui/antdesign】
    手機開發技術棧【vue + vueRouter + vuex + axios + mintui/vant】

    技術開源可以避免版權問題。對於開源項目，可以在github中直接找到

    main.js
    let vm = new Vue({
    data:{
    user:null
    },
    created(){
    this.loadArticles();
    }
    methods:{
    loadArticles(){ }
    }
    })
    window.vm = vm;

    App.vue
    window.vm.user
    export default {
    data(){
    return {}
    }
    created(){
    this 指向當前vue實例對象
    }
    }

    用戶信息不僅僅在main.js中使用，在很多組件中都有可能調用，如何共享一個組件內部中data的數據？
    狀態機可以將所有的公共數據進行統一維護，並且與組件解耦，當組件想要使用額時候，我們直接引用即可；另外，他可以將交互代碼進行封裝，然後提供統一的對外接口，所有的組件都可以調用

    Article.vue
    loadCategories(){}

    Category.vue
    loadCategories(){}

    Article.vue與Category.vue都需要訪問loadCategories函數，如果沒有狀態機，我們需要兩個組件中分別聲明，趙成代碼的冗餘。

    1. vuex的應用
    1. 安裝
       script
       < script src=“vuex.min.js”></ script>

     腳手架 
       
    > vue add vuex
    

    2. 創建vuex對象
       let store = new Vuex.Store({
       state:{},
       getters:{},
       mutations:{},
       actions:{}
       })
    3. 注入到vue的根實例對象中
       new Vue({
       el:’#app’,
       store,
       components :{
       ‘briup-list’:{
       template:``,
       data(){
       return {
       }
       },
       created(){
       this.$store
       }
       }
       }
       })
    4. 使用
       在根vue實例對象的所有的子組件中都可以直接通過this來訪問$store；也可以通過輔助函數進行訪問

     1) 訪問state
       this.$store.state.xxx
    
       computed:{
         ...mapState(["students"])
       }
       使用：
       {{students}} this.students
     2) 訪問getters
       this.$store.getters.xxx
    
       computed:{
         ...mapGetters(["list"])
       }
    
       使用：
       {{list}} this.list
    
     3) 訪問mutations
       this.$store.commit('xxx',)
    
       methods:{
         ...mapMutations(['delMemo'])
       }
       使用：
       this.delMemo(參數)
    
    
     4) 訪問actions
       this.$store.dispatch('xxx',)
    
       methods:{
         ...mapActions(['addMemo'])
       }
       使用：
         this.addMemo(參數)
    

    5. 模塊化
    6. 在腳手架中如何使用vuex

     1) vue vuerouter vuex
       > vue create app05
       手動選擇babel 、Router、Vuex
       > cd app05
       > vue add element
       #引入jquery ajax
       > cnpm install jquery --save
       #日期功能，可以將時間戳序列化
       > cnpm install moment --save
       # es5、es6功能拓展，api, 數組，對象，函數
       > cnpm install lodash --save
    
     2) 後期添加
       > vue add vuex
    
     vue + vuerouter + vuex
    
     架構師級別 ： 框架搭建 + 登錄認證機制 + 業務
     程序員級別：業務
       1. 如何添加頁面 - 路由
       2. 如何完成業務 - 狀態機
    
       週四週五：
    

21. ajax框架 axios 【jQuery】

22. 重複編寫業務（）

注

1. vue如何用？

1. 腳手架中使用vue(中大型項目中)【融合】
   模塊化 - vue組件（模塊化）
   pages
   Category.vue
   Article.vue
2. 單頁面(小頁面)【基礎案例】
   像使用jquery一樣使用vue
   script

2. 剛創建出來的項目，沒有寫代碼但是啓動報錯
   一般都是因爲依賴缺失

解決方案：
移除node_modules
重新執行 cnpm install / yarn install
如果還是解決不了，重新這個過程，並且切換網絡
如果還是解決不了，將nodejs徹底卸載，然後重新安裝
如果還是解決不了，考慮重裝系統