VueX的使用

VueX 是什么？

官方注解
VueX是为了管理多个组件的共享数据

VueX 安装

官方安装

VueX 核心概念

VueX的Demo

• State
  • 共享的数据
  • 使用

  state: {
      actor: [
        {name: '李雪健', age: 66, production: '水浒传',tag: true},
        {name: '陈道明', age: 65, production: '康熙王朝',tag: true},
        {name: '陈宝国', age: 64, production: '大宅门', tag: true},
        {name: '唐国强', age: 68, production: '三国演义', tag: true},
        {name: '何冰', age: 52, production: '白鹿原', tag: true},
        {name: '李耀亭', age: 30, production: 'VUE', tag: false}
      ]
  }
  // 页面使用数据 this.$store.state.actor
  

• Getter
  • 组件使用到的共享数据需要进行特殊处理
  • 使用（此处对数据进行过滤）

   getters: {
      getActor(state) { // 指定的处理 获取是演员的数据
        return state.actor.filter( actor => actor.tag)
      },
      getActorByAge(state) { // 根据我们传递的参数进行数据过滤
        return (age) => {
          return state.actor.filter( actor => actor.age > age)
        }
      }
  }
  // 页面中 this.$store.getters.getActor
  //  this.$store.getters.getActorByAge(60)
  

• Mutation
  • 对共享的数据进行修改（同步函数）
  • 使用

   mutations: {
      changeActor(state) { // 无参数
        state.actor[5].name = 'liyaoting'
      },
      addActor(state, actor) { // 有参数
        state.actor.push(actor)
      },
      addMember(state, param) { // 另一种提交方式
        state.actor.push(param.member)
      }
  // 页面中 
  //  this.$store.commit('changeActor')
  // this.$store.commit('addActor', actor)
  // this.$store.commit({ type: 'addMember', member})
  

• 响应式
  • 在State中声明的属性，都是响应式的，就是当属性发生变化时会通知用到该属性的页面发生页面的刷新(即属性改变时页面上的属性也相应的变化)
  • 如果去修改State中未申明的属性，则数据会发生变化而页面不会刷新（不会随之发生变化）
  • 例子(给第一条数据添加一个属性：饰演的角色)

  mutations: {
     	  addRole(state) {
     	  // 页面的值不会变化
        // state.actor[0]['role'] = '宋江' 
        
        //通过Vue.set() 将属性变为响应式  页面的值会变化  
        Vue.set(state.actor[0], 'role', '宋江') 
        console.log(state.actor[0])
      },
   }
   // 页面中 this.$store.commit('addRole')
  

• Action
  • 对共享的数据进行修改（异步函数），比Mutation多添加一步操作
  • 使用

  actions: {
      changeActorAsyn(context) { 
        setTimeout(() => {
          context.commit('changeActor')
        }, 1000);
      },
      // 异步结合promise使用
      addActorAsyn(context, payload) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            context.commit('addActor',payload)
            resolve('返回成功信息')
            reject('返回失败信息')
          }, 1000);
        })
      }
  }
  // 页面中
  //  this.$store.dispatch('changeActorAsyn')
  // let actor = {name: '周星星', age: 58, production: '大话西游',tag: true}
  //    this.$store.dispatch('addActorAsyn',actor)
  //    .then( res => {
  //      console.log(res);
  //   })
  

• Module
• 官方注解