vuex的使用

vuex (vue的状态管理)

使用vue-cli3 可以创建项目的时候安装vuex插件

创建好的项目结构

store.js文件

就可以使用vuex的state,getters,mutations,actions

1.存储数据源
state:{
  count:1
}
使用:在html中插值 {{this.$store.state.count}}

2.相当于vue中的computed,getters 可以用于监听、state中的值的变化,返回计算后的结果
getters:{
  getGettersState: function (state) {
    return state.count + 1
  }
}
使用:在html中插值 {{this.$store.getters.getGettersState}}

3.在页面修改数据 mutations
在当前vue页面的script的methods中添加的方法中使用this.$store.commit("自定义名")
mutations:{

  自定义名:function (state) {

    state.count = state.count + 1
  }

}

使用:

4.官方并不建议直接去修改store里面的值,我们去提交一个actions,在actions中提交mutation再去修改状态值

 

原文地址:https://www.cnblogs.com/yangxiaobai123/p/11220939.html