vuex+Es6语法补充-Promise

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,采用 集中式存储管理

单页面的状态管理：

多页面状态管理：

使用步骤：

// 1.导入
import Vuex from 'vuex'
// 2.安装插件
Vue.use(Vuex)
// 3.创建对象
const store = new Vuex.Store({
  state,     // 状态
  mutations,   //  同步信息变化
  actions,       // 异步信息变化
  getters,       // 变化属性 相当于computed属性
  modules: {   // 模型
    a:moduleA
  }
})
// 4.导出
export default store

1.mutations状态更新

• Mutation主要包括两部分：
• 字符串的事件类型（type）
• 一个回调函数（handler）,该回调函数的第一个参数就是state。

// 定义方式：
    decrement(state){
      state.counter--
    }
// 通过mutations更新
    subtraction(){
      this.$store.commit('decrement')
    }

// 传递参数：
    decrementCount(state,payload){
      // 普通提交
      // state.counter+=count
      // 特殊提交
      state.counter += payload.count
    },
// 通过mutations更新
    addCount(count){
      // 普通提交
      // this.$store.commit('decrementCount',count)
      // 特殊提交
      this.$store.commit({
        type: 'decrementCount',
        count   // ccount的参数在下面button中面传递
          })
    }

<button @click="addCount(5)">+5</button>

• mutations响应规则：

• 当给state中的对象添加新属性时, 使用下面的方式:
  • 方式一: 使用Vue.set(obj, 'newProp', 123)
  • 方式二: 用新的对象给旧对象重新赋值

2.getters使用
  powerCounter(state){
    return state.counter*state.counter
  },
  more20stu(state){
    return state.students.filter(s=>s.age > 20)
  },
  more20stuLength(state,getters){
    return getters.more20stu.length
  },
  moreAgestu(state){
    // return function(age){
    //   return state.students.filter(s=>s.age>age)
    // }
    return age=>{
      return state.students.filter(s=>s.age>age)
    }
  }

3.actions使用

context是和store对象具有相同方法和属性的对象

我们可以通过context去进行commit相关的操作, 也可以获取context.state等

context是上下文 相当于store

 updateInfo(state){
	        state.info.name='zranguai'
	       }
	  
	    clic(){
	      // this.$store.commit('updateInfo')
	      // this.$store.dispatch('aUpdateInfo',{
	      //   message:'我是message',
	      //   success: ()=>{
	      //     console.log('打印成功');
	          
	      //   }
	      // })
	      this.$store.
	      dispatch('aUpdateInfo','我是携带信息')
	      .then(res=>{
	        console.log('里面完成了提交');
	        console.log(res);
	      })
	    },
	  }
	   
	    <button @click='clic'>哈哈哈</button>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Es6语法补充-Promise

Promise是异步编程的一种解决方案

1.

	// 1.定时器的异步事件
    new Promise((resolve,reject)=>{
      setTimeout(()=>{
        // 1.成功调用resolve
        resolve('hello')
        // 2.失败调用reject
        reject('error')
      },1000)
    }).then((data)=>{
        console.log(data);
        
      }).catch(err=>{
        console.log(err);
      })

2.Promise三种状态

• pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

3.链式调用简写

   1.return Promise.resovle(data)

   2.return data

   3.promise的all方法使用

  Promise.all([
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve({
            name:'why',
            age:18
            })
        },2000)
      }),
      new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('result2')
        },2000)
      })
    ]).then(results=>{
      console.log(results);
    })