vue基础

今日学习
状态机基础 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实例对象
}
}
1) vuex的应用
1. 安装
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(参数)