[JavaScript知识库]Vue Vuex

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

• State
• Getters
• Mutations
• Actions
• Modules

// store中
state: {
  uname: "lena";
}
mutations:{
  setUname(state,uname){
    state.uname=uname;
  }
}
actions:{   // 发送异步请求，调用mutations的函数，修改state的数据
  vlogin(context,form){
    axios.post(
      '/users',
      `uname=${form.uname}`
    ).then(res=>{
      if(res.ok){
        context.commit('setUname',res.uname)
      }
    })
  }
}
// 页面
import {mapState,mapMutations,mapActions} form 'vuex'
computed:{
  ...mapState(['uname'])
  uname(){
    return ...
  }
}
methods:{
  ...mapMutations(['setUname'])
  ...mapActions(['vlogin'])
  setUname(xxx){
    ...
  }
  login(){
    this.vlogin(this.form)
    .then(...)
  }
}