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彻底卸载，然后重新安装
如果还是解决不了，考虑重装系统