vuex 笔记

1.基本使用方法

mutation 中不能使用异步操作

state单一状态树

只写一个state 如果有其它公共的state需要写 可以进行模块化划分

getters的基本使用

getters作为参数和传递参数

mutation传递参数

1.传入一个参数

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

 methods: {
 addCount(count) {
        // payload: 负载
        // 1.普通的提交封装
        // this.$store.commit('incrementCount', count)

        // 2.特殊的提交封装
        this.$store.commit({
          type: 'incrementCount',
          count    //整个 commit里的东西变成一个对象 叫 payload
        })
      },
  addStudent() {
        const stu = {id: 114, name: 'alan', age: 35}
        this.$store.commit('addStudent', stu)
      },
      }

 incrementCount(state, payload) {
    // console.log(count);
    state.counter += payload.count
  },
 addStudent(state, stu) {
    state.students.push(stu)
  },

mutation相应规则

在action里使用异步操作，用于替代mutation

action的默认属性 context = 上下文

updateInfo() {
        // this.$store.dispatch('aUpdateInfo', {
        //   message: '我是携带的信息',
        //   success: () => {
        //     console.log('里面已经完成了');
        //   }
        // })

 // context: 上下文
  // aUpdateInfo(context, payload) {
  //   setTimeout(() => {
  //     context.commit('updateInfo')
  //     console.log(payload.message);
  //     payload.success()
  //   }, 1000)
  // },

-----------------------------------------------！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

 aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload);

        resolve('1111111')
      }, 1000)
    })
  }

 this.$store
          .dispatch('aUpdateInfo', '我是携带的信息')
          .then(res => {
            console.log('里面完成了提交');
            console.log(res);
          })

modules的使用

<h2>{{$store.state.a.name}}</h2> // a被放在了state里面

modules: {
    a: moduleA
  }

const moduleA = {
   state： {
      name: 'qwe'
   }
}