Vuex

安装插件

Vue.use(Vuex)

创建Vuex对象

const store = new Vuex.store({})

Vue中有5个属性

export default new Vuex.Store({
  state,
  mutations,
  getters，
  actions
 
});

state属性

const state = {
  count: 100,
  children: [{
    name: 'kobe',
    age: 15
  }, {
    name: 'jamis',
    age: 20
  },
    {
      name: 'kuli',
      age: 18
    }]
}

getters

getters和计算属性有点类似，在计算属性里面定义的方法，要return 出去值，创建方法时有参数，第一个是state指的是Vuex内的state，第二个是传getters对象，可以调用其他的getters方法。

const getters = {
  counts(state) {
    return state.count * state.count
  },
  updatecount(state, getters) {
    return getters.counts + 100;
  },
  more15stu(state) {
    // return state.children.filter(function (e) {
    //   return e.age > 15;
    // })
    //等价于上面的代码  这里.filter是一个过滤器
    return state.children.filter(e => e.age > 15)
  },
  morenostu(state) {
    return function (age) {
      return state.children.filter(e => e.age > age)
    }
  }
}
-------------------------使用getters------------------
{{this.$store.getters.counts}}
{{this.$store.getters.updatecount}}
{{this.$store.getters.more15stu}}

mutations

mutations方法，外部调用的时候用commit()，在创建方法的时候用第一个参数state指就是当前这个Vuex里的state，第二个参数就是可以接收的参数payload。

const mutations = {
  //方法
  increment(state) {
    state.count++;
  },
  reduce(state) {
    state.count--;
  },
  incrementcount(state, count) {
    state.count += count
  },
  incrementstu(state, payload) {
    //payload: 负载
    // state.children.push(stu) 普通提交方式
    state.children.push(payload.stu);

  }
}
-------------------------调用:-------------------
  methods: {
    increment() {
      this.$store.commit("increment");
    },
    reduce() {
      this.$store.commit("reduce");
    },
    incrementcount(count){
      this.$store.commit('incrementcount',count)
    },
    incrementstu(){
      //普通的提交风格
      const stu = {name: '姚明',age: 25}
      // this.$store.commit('incrementstu',stu)
      //特殊的提交
      this.$store.commit({
        type: 'incrementstu',
        stu
        }
      )
    }
  }

actions

actions创建可以实现异步操作的方法，参数是context，这个参数相当于$store，使用这个方法的时候，必须通过context.commit去调用mutations内的方法，在外部使用dispatch()。

const actions = {
  updatecountasyn(context,payload){
    setTimeout(() => {
      console.log(payload.message);
      payload.success();
      context.commit('increment');
    },5000);
  },
  updatecountasyn2(context,payload){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log(payload);
          context.commit('increment');
          resolve();
        },5000);
      });
  }
}
-------------------------调用---------------------------

    incrementasyn() {
      //第一种
      this.$store.dispatch('updatecountasyn',
        {
          message: '这是携带的信息',
          success: () => {
            console.log('这是成功后回调的函数');
          }
        }
      )
    },
    incrementasyn2() {
      //第二种
      this.$store.dispatch('updatecountasyn2', '这是携带的信息').then(
        function () {
          console.log('这是成功后回调的函数');
        }
      )
    }

modules

modules创建多个模块，调用，在模块中可以定义state.getters.mutations.actions 通过属性RootState和RootGetters来实现模块之间内相互调用

数据响应式

需要给容器中state中的对象或者数组添加和删除东西的是用Vue.set()和Vue.delete()