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
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实例内部