环江建设网站,苏醒8 WordPress,个人主页介绍,住房和城乡建设局待遇Vuex的核心概念
StateMutationAction
1.State
State提供唯一的公共数据源#xff0c;所有共享的数据都统一放在Store的State中进行存储。
const store new Vuex.Store({state : { count: 0 }
}) 这是渲染的页面 组件访问数据的第一种方式 组件访问数据的第二种方式
// 1…Vuex的核心概念
StateMutationAction
1.State
State提供唯一的公共数据源所有共享的数据都统一放在Store的State中进行存储。
const store new Vuex.Store({state : { count: 0 }
}) 这是渲染的页面 组件访问数据的第一种方式 组件访问数据的第二种方式
// 1.从 vuex 中按需导入 mapState 函数
import { mapState } from vuex
通过刚才导入的 mapState 函数将当前组件需要的全局数据映射为当前组件的 computed 计算属性
// 2.将全局数据映射为当前组件的计算属性
computed:{...mapState([count])
} 2.Mutation
Mutation用来更改Store中的数据
只能通过mutation来更改Store数据不可以直接操作Store中的数据通过这种方式操作可以更好的集中监控所有数据的变化
触发mutations的第一种方式
A.-1
// 定义Mutation
const store new Vuex.Store({state:{count:0},mutations:{add(state){//变更状态state.count}}
})// 触发mutation
methods: {btnAdd() {//触发 mutation 的第一种方式this.$store.commit(add)}
} B.-n
// 定义Mutation
const store new Vuex.Store({state : {count : 0},mutations : {addN(state,step){// 变更状态state.count step}}
})// 触发 mutation
methods : {handle(){// 在调用 commit 函数// 触发 mutationas 携带参数this.$store.commit(addN,3)}
} 触发mutations的第二种方式
// 1.从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from vuex
通过刚才导入的mapMutations函数将需要的mutations函数映射为当前组件的 methods 方法
// 2.将指定的mutations函数映射为当前组件的methods函数
methods:{...mapMutations([add,addN])
}
A.-1 B.-n 3.Action
Action用于处理异步任务。
如果通过异步操作变更数据必须通过Action不能使用Mutation但是在Action中还是要通过触发Mutation的方式简介变更数据。
触发actions的第一种方式
A不带参数
// 定义 Action
const store new Vuex.Store({//...mutations : {add(state){state.count}},actions :{addAsync(context){setTimeout(() {context.commit(add)},1000)}}
})// 触发 Action
methods : {btnAdd3 () {//触发 actions的第一种方式this.$store.dispatch(addAsync)}
} B带参数
// 定义 Action
const store new Vuex.Store({//...mutations : {addN(state, step){state.count step}},actions :{addNAsync(context, step){setTimeout(() {context.commit(addN, step)},1000)}}
})// 触发 Action
methods : {btnAdd4 () {// 在调用 dispatch 函数// 触发 actions 时携带参数this.$store.dispatch(addNAsync, 5)}
} 触发actions的第二种方式
// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from vuex
通过刚才导入的 mapActions 函数将需要的 actions 函数映射为当前组建的 methods 方法
// 2.将指定的 actions 函数映射为当前组件的 methods 函数
methods:{...mapActions([addAsync,addNAsync])
}
A.-1 B.-n 这就是大体步骤 4.Getter
Getter用于随Store中的数据进行加工处理形成新的数据
Getter对Store中已有数据加工处理之后形成新的数据类似vue的计算属性Store中数据发生变化Getter的数据也会跟着变化
// 定义Getter
const store new Vuex.Store({state : {count : 0},getters : {showNum: state {return 当前数据是${state.count}}}
})// 触发 mutation
methods : {handle(){// 在调用 commit 函数// 触发 mutationas 携带参数this.$store.commit(addN,3)}
}
定义Getters 使用getters的第一种方式
this.$store.getters.名称 使用getters的第二种方式
import { mapGetters } from vuexcomputed: {...mapGetters([showNum])
}
