VUEX的学习

VUEX的学习

回忆以前组件之间共享数据的方法

• 父向子传值： v-bind属性绑定

• 子向父传值 ： v-on 事件绑定

• 兄弟组件之间共享数据： EventBus

  ​ 但是：当频繁的传值的时候，这些方法便显得力不从心了

Vuex概念

• Vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间的互相传值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1xB4TDw0-1645866225584)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\image-20220226114655172.png)]

• 好处

  • 在VUEX中存储的数据都是响应式的

基本步骤

• 安装：npm包方式：

  npm install vuex -save
  

• 导入vuex包

  import导入

  use注册全局

• 创建store对象

  const store =  new Vuex.store({
      //state属性   可以看做vue的data    存储着共享的数据
      state：{数据},   
      //数据修改  不允许直接对$store对象的数据直接赋值修改
      mutations:{},
      //如果要修改数据的值，可以用commit方法调用mutation里面定义的修改函数
      actions:{},
       //如果要异步修改数据的值，可以在这个属性节点借用mutation的修改函数
         //参数默认接收content（可以看错store的实例）  因为不允许直接对state数据修改
          //在外部调用这个节点的函数不能用commit要用dispatch调用异步函数
      modules:{},
         //vuex的模块化
      getters:{}
     //类似于vue的计算属性
  })
  //引入数据 1. vue实例上的$store对象的state
  //2. 解构导入vuex的mapstate   在计算属性之中   展开...mapState([数据])
  //修改数据
    //解构导入vuex的mapstate  在方法属性里面   展开···mapMutation([方法名])
  //异步修改数据
     //结构导入vuex的mapAction ，也是在方法属性里面 展开运算符
  
  //上诉展开后直接调用方法名
  

• 将vuex的实例store和路由一样挂载到vue实例上

vuex的模块化

• vuex实例的module节点下，可以根据业务逻辑讲不同业务的vuex分开

  modules:{
      第一个业务vuex：{
          state：{}，
          mutation：{}
      }，
      第二个业务vuex：{}
  }
  //那么问题来了 怎么触发单个业务vuex的修改函数
    答案：this.$store.commit('函数名')   是不是感觉有点混搅一起
   //命名空间的开启：namespaced：true
    此时不能用上述方法调用
    this.$store.commit('业务vuex名/函数名')