网站短链接生成,济宁网络,服装电子商务网站建设3000字,互联网推广与营销Vuex 主要应用于Vue.js中管理数据状态的一个库通过创建一个集中的数据存储#xff0c;供程序中所有组件访问 使用场景 涉及到非父子关系的组件#xff0c;例如兄弟关系、祖孙关系#xff0c;甚至更远的关系组件之间的联系中大型单页应用#xff0c;考虑如何更好地在组件外部… Vuex 主要应用于Vue.js中管理数据状态的一个库通过创建一个集中的数据存储供程序中所有组件访问 使用场景 涉及到非父子关系的组件例如兄弟关系、祖孙关系甚至更远的关系组件之间的联系中大型单页应用考虑如何更好地在组件外部管理状态 状态管理
对于大型应用程序有效地管理状态是至关重要的。Vuex是Vue.js的官方状态管理库它提供了集中式的状态管理机制。通过学习Vuex的核心概念state、mutations、actions、getters你可以更好地组织和管理应用程序的状态。 核心概念 State状态Vuex 使用单一状态树即在一个对象中包含了全部应用层级的状态这样可以方便进行状态的管理和维护。State 是存储数据的地方。 Getters获取器Getters 可以被看作是 store 的计算属性。你可以在 getter 中计算状态这样可以在多个组件中复用计算逻辑。 Mutations变更Mutation 是唯一能够改变状态的方法。每个 mutation 都有一个字符串类型的事件类型和一个回调函数该回调函数就是实际进行状态更改的地方。 Actions动作Actions 是用来提交 mutation 的方法。而不是直接变更状态而是通过提交 mutation 的方式来变更状态。可以在 action 内部进行异步操作。 Modules模块当应用变得非常复杂时store 对象会变得非常庞大。Vuex 允许我们将 store 分割成模块modules每个模块拥有自己的 state、getters、mutations 和 actions。 1.基本使用
// 引入vue
import Vue from vue
// 引入vuex
import Vuex from vuex
// 应用vue插件
//放这应该要在store前
Vue.use(Vuex)
// actions响应组件中的动作
const actions {
}
// mutations操作数据state
const mutations {
}
// 准备state存储数据
const state {//状态对象
}
// 创建store并导出
const store new Vuex.Store({actions,mutations,state,
})
//默认导出store
export default store
2.具体应用选项式
this.$store.commit(JIA,this.n)//直接走Mutation
this.$store.dispatch(jiaOdd,this.n)//走Action
//该文件用于创建Vuex中最为核心的store
import Vue from vue
//引入Vuex
import Vuex from vuex
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions {
/* jia(context,value){
console.log(actions中的jia被调用了)
context.commit(JIA,value)
},
jian(context,value){
console.log(actions中的jian被调用了)
context.commit(JIAN,value)
}, */
jiaOdd(context,value){
console.log(actions中的jiaOdd被调用了)
if(context.state.sum % 2){
context.commit(JIA,value)
}
},
jiaWait(context,value){
console.log(actions中的jiaWait被调用了)
setTimeout((){
context.commit(JIA,value)
},500)
}
}
//准备mutations——用于操作数据state
const mutations {
JIA(state,value){
console.log(mutations中的JIA被调用了)
state.sum value
},
JIAN(state,value){
console.log(mutations中的JIAN被调用了)
state.sum - value
}
}
//准备state——用于存储数据
const state {
sum:0 //当前的和
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
3.Vuex其他配置
getters(将state中的数据进行加工)
//所需原始数据*/,计算属性
//准备getters——用于将state中的数据进行加工
const getters {
bigSum(state){return state.sum*10}
}
//取
this.$store.getters.bigSum 对象运算符 ... 展开运算符spread operator允许一个表达式在某处展开。展开运算符在多个参数用于函数调用或多个元素用于数组字面量或者多个变量用于解构赋值的地方可以使用。 展开运算符不能用在对象当中因为目前展开运算符只能在可遍历对象iterables可用。iterables的实现是依靠[Symbol.iterator]函数而目前只有Array,Set,String内置[Symbol.iterator]方法而Object尚未内置该方法因此无法使用展开运算符。 mapState(读取State中数据)
//借助mapState生成计算属性从state中读取数据。数组写法
...mapState([sum,school,subject]),
//借助mapState生成计算属性从state中读取数据。对象写法
// ...mapState({he:sum,xuexiao:school,xueke:subject}),
mapGetters(读取getter中数据)
//借助mapGetters生成计算属性从getters中读取数据。数组写法
...mapGetters([bigSum])
//借助mapGetters生成计算属性从getters中读取数据。对象写法
// ...mapGetters({bigSum:bigSum})
mapMutations
//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(对象写法)...mapMutations({increment:JIA,decrement:JIAN}),
//借助mapMutations生成对应的方法方法中会调用commit去联系mutations(数组写法)
// ...mapMutations([JIA,JIAN]),
mapActions //借助mapActions生成对应的方法方法中会调用dispatch去联系actions(对象写法)...mapActions({incrementOdd:jiaOdd,incrementWait:jiaWait})
//借助mapActions生成对应的方法方法中会调用dispatch去联系actions(数组写法)// ...mapActions([jiaOdd,jiaWait])
Tip:mapActions与mapMutations使用时若需要传递参数需要:在模板中绑定事件时传递好参数否则参数是事件对象。MapActions与MapMutations传参 4.Modules
使用单一状态树导致应用的所有状态集中到一个很大的对象。但是当应用变得很大时store 对象会变得臃肿不堪。 为了解决以上问题Vuex 允许我们将 store 分割到模块module。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割 const moduleA {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB {state: { ... },mutations: { ... },actions: { ... }
}const store new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // - moduleA 的状态
store.state.b // - moduleB 的状态 模块的局部状态 对于模块内部的 mutation 和 getter接收的第一个参数是模块的局部状态,对于模块内部的 getter根节点状态会作为第三个参数: const moduleA {state: { count: 0 },mutations: {increment (state) {// state 模块的局部状态state.count}},getters: {doubleCount (state) {return state.count * 2},sumWithRootCount (state, getters, rootState) {return state.count rootState.count}} 模块内部的 actioncontext.state 是局部状态根节点的状态是 context.rootState: const moduleA {// ...actions: {incrementIfOddOnRootSum (context) {if ((context.state.count context.rootState.count) % 2 1) {commit(increment)}}}
} 5.VueX 高级
组合式API写法
组合式APIhttp://t.csdnimg.cn/WWEmT
组合式API与Vuex 可以通过调用 useStore 函数来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API 访问 this.$store 是等效的。 import { useStore } from vuexexport default {setup () {const store useStore()}
} 为了访问 state 和 getter需要创建 computed 引用以保留响应性这与在选项式 API 中创建计算属性等效。 import { computed } from vue
import { useStore } from vuexexport default {setup () {const store useStore()return {// 在 computed 函数中访问 statecount: computed(() store.state.count),// 在 computed 函数中访问 getterdouble: computed(() store.getters.double)}}
} 要使用 mutation 和 action 时只需要在 setup 钩子函数中调用 commit 和 dispatch 函数 import { useStore } from vuexexport default {setup () {const store useStore()return {// 使用 mutationincrement: () store.commit(increment),// 使用 actionasyncIncrement: () store.dispatch(asyncIncrement)}}
} 插件与Vuex
Vue插件推荐博客http://t.csdnimg.cn/ohptY
待完善
