状态管理
状态的分类
- UI状态
- 用户状态
区别：是否存在数据库当中
将表示状态的数据放在store中，
哪个组件要用到数据就在store中取
get
想要修改就
set
Store
要将sotre直接传给根组件
const store =new Vuex.Store({
state:{
n:0
},
mutations:{
plus(state){
state.n=state.n+1
}
}
})
store.commit('plus')
computed:{
x(){
return store.state.n}
}
触发操作。在methods中定义要改变状态的方法
methods:{
add(){
store.commit('plus')
}
}
为什么要用辅助函数？
- 简化代码
- 使用方便
引入后不用赘余的写新名字
辅助函数
mapGetter
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
mapStates
import {mapState} from "Vuex"
computed:{
...mapState([
'n'
])
}
当映射的计算属性的名称和state的子节点的名称相同时，可以传一个字符串数组
为了避免在子组件中的commit要引入store
可以使用辅助函数 mapMutations
import {mapMutations} from 'vuex'
methods:{
...mapMutations(['plus'])
}
mutations必须是同步函数
因为Vue的 devtool跟踪不到数据变化，无法进行时间旅行
actions:{
plusAsync(context){
setTimeout(()=>{
context.commit('plus')
},1000)
}
}
import {mapActions} from "vuex"
methods:{
...mapMutations(['plusAsync'])
}
模块
account: {
namespaced: true,//命名空间
// 模块内容（module assets）
state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},
}
启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。
computed: {
...mapState({
a: state => state.some.nested.module.a,
b: state => state.some.nested.module.b
})
},
methods: {
...mapActions([
'some/nested/module/foo', // -> this['some/nested/module/foo']()
'some/nested/module/bar' // -> this['some/nested/module/bar']()
])
}
简化
computed: {
...mapState('some/nested/module', {
a: state => state.a,
b: state => state.b
})
},
methods: {
...mapActions('some/nested/module', [
'foo', // -> this.foo()
'bar' // -> this.bar()
])
}
只需要在根js(main.js)下引入s
