vuex的知识要点

1.先来一张图，由于官方的规范 ，都使用mutations去修改值。下图箭头代表了数据的流向。

异步时使用Actions。 另外官方的devtools是通过Mutations去记录谁修改了。

store里的代码

import Vue from 'vue'
import Vuex from 'vuex'
import {
  INCREMENT
} from './mutations-type'
Vue.use(Vuex)

const moduleA = {
  state: {
    name: 'zhangsan'

  },
  mutations: {
    updateNames(state, playload) {
      state.name = playload
    }
  },
  getters: {
    fullname(state) {
      return state.name + '1111'
    },
    fullname2(state, getters) {
      return getters.fullname + '222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context) {
      setTimeout(() => {
        context.commit('updateNames', 'wangwu')
      }, 1000)
    }
  }
}

export default new Vuex.Store({
  state: {
    counter: 0,
    info: {
      name: 'cobi',
      height: 1.78
    },
    students: [
      { id: 110, name: 'jack', age: 23 },
      { id: 111, name: 'lucy', age: 30 },
      { id: 112, name: 'jmse', age: 13 },
      { id: 113, name: 'lilei', age: 26 }
    ]
  },
  mutations: {
    // 方法
    [INCREMENT](state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    incrementConunt(state, count) {
      console.log(count)
      state.counter += count
    },
    updateInfo(state) {
      state.info.name = 'feifei'
    }
  },
  actions: {
    // aUpdateInfo(context, playload) {
    //   setTimeout(() => {
    //     context.commit('updateInfo')
    //     console.log(playload.message)
    //     playload.success && playload.success()
    //   }, 1000)
    // }
    aUpdateInfo(context, playload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateInfo')
          console.log(playload)
          resolve('11111')
        }, 1000)
      })
    }
  },
  getters: {
    powerConter(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)
      }
    }
  },
  modules: {
    a: moduleA
  }
})

vue里的代码

<template>
  <div id="app">
    <h2>------App内容：modules中的内容--------</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
    <h2>{{$store.getters.fullname}}</h2>
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
    <button @click="asyncUpdateName">异步</button>
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <h2>{{$store.getters.powerConter}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLength}}</h2>
    <h2>{{$store.getters.moreAgeStu(8)}}</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="addCount(5)">+</button>
    <button @click="subtraction">-</button>
    <button @click="update">更新</button>
    <h2>-------</h2>
    <hello-vuex></hello-vuex>
  </div>
</template>
<script>
import HelloVuex from './components/HellloVuex'
export default {
  components: {
    HelloVuex
  },
  data () {
    return {
      message: 'lls'
    }
  },
  methods: {
    addition () {
      this.$store.commit('increment')
    },
    subtraction () {
      this.$store.commit('decrement')
    },
    addCount(count) {
      // 1.普通的提交封装
      this.$store.commit('incrementConunt', count)
      // 2.特殊的提交封装
      // this.$store.commit({
      //   type: 'incrementConunt',
      //   count
      // })
    },
    update() {
      // this.$store.commit('updateInfo')
      // this.$store.dispatch('aUpdateInfo', {
      //   message: '我是携带的信息',
      //   success: () => {
      //   console.log('已经完成了')
      // }
      // })
      this.$store.dispatch('aUpdateInfo', '我是携带的信息')
      .then(res => {
        console.log('已经完成了')
        console.log(res)
      })
    },
    updateName() {
      this.$store.commit('updateNames', 'feifei')
    },
    asyncUpdateName() {
      this.$store.dispatch('aUpdateName')
    }
  }
}
</script>
<style>
</style>

mutation状态更新 

mutation传递参数

 mutation的提交类型

1.普通提交和特殊提交，这个在store里打印出来传的参数是不一样的

打印出来count的结果

插入个小知识

修改对象需要响应式也要这样

js中删除对象的属性，也是不会响应式的

mutation响应式的规则

穿插一个 es6知识点。属性名表达式

因为官方推荐mutaion用常量类型

 异步操作由来：

使用action

上面两步，可以优化成这样，可以拿到回调结果

modules按模块划分

context里面的值log出来

上面的写法也可以优化成解构的写法

 

好了。其它的有一些简单的写法，类似mapState 辅助函数，在官方文档

https://vuex.vuejs.org/zh/guide/state.html

vuex的项目结构规范