vuex笔记

state

Map state

将本地的属性与state中的属性进行映射。免去了每次使用state中的属性都要去调用this.$state

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

==>

computed: mapState([
  // 映射 this.count 为 store.state.count
  //当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
  'count'
])

curried function

what is currying

let add = x => y => x + y
add(2)(3) // 5

==》即，闭包

function add(a) {
	return function(b) {
		return a + b;
	}
}

所以，前n-1个箭头只是将参数存储起来，到最后一个函数才真正执行

getter

getter是store的计算属性。当你需要使用store中某些属性的扩展时，使用getter

如何理解计算属性

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

store.getters.doneTodos 
// -> [{ id: 1, text: '...', done: true }]

当你调用计算属性时，会自动执行计算属性中定义的"函数"，再把结果返回。注意，计算属性是属性，不是函数，因此使用时不加函数调用符()

但有的时候，计算属性也可以作为函数调用 ?

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) 
// -> { id: 2, text: '...', done: false }

第一个括号中的内容(state)，是计算属性会默认使用的参数，不需要人工传值

返回值为一个函数(id) => {}, 此函数接受一个id作为参数

因此计算属性也可以当作方法调用

Map getter

state的计算属性作为本地的计算属性使用

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

然后，store中的计算属性就可以当作本component自己的计算属性进行使用啦

mutation

用来改变state中的属性，只能包含同步操作

通过store.commit来提交更改

mutation handler 接受 store作为第一个参数，额外参数作为payload对象传入

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

当需要对state中的对象增加某个属性时：

Vue.set(obj, 'newProp', 123) //obj 对象， newProp 新属性
// or
state.obj = { ...state.obj, newProp: 123 }

Map mutation

mutation handler作为本地组件的方法进行调用

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

Action

action是可以封装多个mutation操作，并且可以执行异步。action的触发方式为dispatch

Action 同样支持payload额外参数

action handler 的第一个默认参数是context （state的替代）

实际使用中，我们可以采用参数结构的方式从context提取出commit，state来使用

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

mapAction

将Action作为本地组件的方法调用

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

store的dispatch返回的是promise对象，因此可以使用then或者async await

刷新页面或跳转页面，vuex中的变量会丢失

其他

script标签中，不同的属性并不绑定。如data，computed，method中不同的属性相互调用必须加上this

但是 template标签中的html与script中的data，computed直接绑定，可以直接应用在vue实例内部