vuex的运行流程
下面是官网提供的vuex的运行流程
vuex的特点:
针对非异步操作:components中可以不用store.dispatch,直接触发action,再执行commit触发mutation去改变state
针对异步操作:components上store.dispatch一个action,得到数据后再执行commit触发mutation去改变state
vuex的不同
vuex的状态存储是响应式的,store的状态发生改变时相应的组件也会相应的得到高效更新。
可以直接store.state.xxx = xxx去修改state的值,但是不建议这样做,要用mutation,这样可以有迹可循,更好管理。通过store.commit(‘xxx’),传入定义好的mutation,去修改对应的state。例:
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
store.commit('increment') // 这一步相当于触发action,调用定义好的mutations去改变state
console.log(store.state.count) // 1
getters的作用:对state进行额外计算或设置的方法都放在getters里面,并暴露出去调用。
注:getters和mutations的区别和computed和method的区别一样。
vue的事件可以放在computed和method中:
method要显示的真正的去执行了,computed不用显式的等待执行,只要用定义它的属性就可以了。
mutations是处理业务逻辑的,getters是公共的一些方法,对state进行一些简单操作。
如:
export const getCount = state => state.count;
export const getTopics = state => state.topics;
actions负责接收用户提交的事件,不做其他具体操作!
vuex的各模块详解及使用
1、state的使用
- 单一状态树,用一个对象就包含了全部的应用层级状态。
- mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。
- 注意:store中的state必须放在vue的computed里去使用,不要放在data里。
如:
import {mapState} from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlia: 'count',
countPlusLocalState(state){
return state.couunt + this.localCount
}
})
// ...mapState({count})扩展运算符
}
2、getters的使用
- 从store中的state中派生出一些状态
- mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性,可以
- getters可以认为是store的计算属性
如:
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: '...', done: true},
{id: 2, text: '...', done: false}
]
},
getters: {
// 对state进行额外的扩展,过滤并返回已完成的state
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
// 在computed中使用
computed: {
doneTodos () {
// 所有东西都被挂载在了this.$store上
return this.$store.getters.doneTodos
}
// 或者如下取得所有getters
...mapGetters(['doneTodos'])
}
3、mutations
- 更改vuex的store中的状态的唯一方法是提交mutation(不能直接调用句柄,必须通过触发)
- mutations就是vue中的methods
- 每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)
- 使用常量代替mutation事件类型
- mutation必须是同步函数,更改state必须是同步的去更改。若异步的更改必须先交给dispatch包裹action发起异步请求,响应后再交给mutation修改state。
如:
import {mapMutations} from 'vuex'
import { SOME_MUTATION } from './mutation-types'
export default {
methods: {
test() {
// commit之后就会去修改state
this.$store.commit(SOME_MUTATION)
},
...mapMutations([
'SOME_MUTATION'
// 映射this.increment() 为this.$store.commit('SOME_MUTATION')
])
}
}
4、actions
- action提交的是mutation
- action可以包含任意异步操作,之后再提交给mutation改变state
- mapActions辅助函数将组件的methods映射为
- 触发actions用store.dispatch调用,提交mutation用commit
- view->store.dispatch(‘increment’)->action->commit(‘SOME_MUTATION’)
如:
// 定义actions
actions: {
// 连个异步操作,先后执行mutation,异步变同步
async actionA({commit}) {
commit('gotData', await getData())
},
async actionB({dispatch, commit}) {
await dispatch('actionA') // 等待actionA完成
commit('gotOtherData', await getOtherData()) // commit后面可以带数据,可以交给mutation去修改state
}
}
// 调用actions
import {mapActions} from 'vuex'
export default {
methods: {
test() {
store.dispatch('actionB')
},
...mapActions([
'actionB'
// 映射this.increment()
// this.$store.dispatch('actionB')
])
}
}
5、modules
Vuex运行我们将store分割到模块(module)。每个模块拥有自己的state、mutation、action、getters、甚至是嵌套子模块—从上至下进行类似的分割。