网站建设合同图片,免费个人网站建站,北海住房和城乡建设部网站,婚恋网站排名前10核心概念
Store 有五个核心的概念#xff0c;State、Getters、Mutations、Actions、Modules。你都必须要知道它们的作用是什么。
State 状态
我们每一个项目#xff0c;基本上都是使用同一个 store 实例#xff0c;所以 State 也是共用一个#xff0c;State 是一个对象State、Getters、Mutations、Actions、Modules。你都必须要知道它们的作用是什么。
State 状态
我们每一个项目基本上都是使用同一个 store 实例所以 State 也是共用一个State 是一个对象也是唯一一个数据源整个 Store 中的数据都从 State 中进行管理存储。State 其实就像是 Vue 实例中的选项 data。
基础案例
在组件中获取 State 数据
由于 State 是响应式的所以能够结合计算属性将其返回。每当 state.count 变化的时候, 都会重新求取计算属性并且触发更新相关联的 DOM。
templatediv classhome{{ count }}/div
/templatescript
export default {computed: {count() {return this.$store.state.count}}
}
/script通过 mapState 辅助函数获取 State 数据
当一个组件需要获取多个 State 状态的时候将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题我们可以使用 mapState 辅助函数帮助我们生成计算属性从而优化你的代码。
templatediv classhome{{ count }}/div
/templatescript
import { mapState } from vuexexport default {computed: {...mapState({count: (state) state.count,name: (state) state.name})}
}
/scriptGetters 计算属性
有时候我们需要从 store 中的 state 中派生出一些状态这种情况就需要用到 getters。其实 getters 就是和计算属性 computed 一样的。因为有些情况你觉得 state 的数据不是你想要的格式你想在其基础上加工进行处理然后在进行使用当然也不会影响原始 state 的值。
基础案例
定义 Getters 在原始 State 基础上进行加工
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {name: xiaoming},getters: {name(state) {return my name is state.name}}
})export default store在组件中获取 Getters 数据
templatediv classhome{{ name }}/div
/templatescript
export default {computed: {name() {return this.$store.getters.name}}
}
/script通过 mapGetters 辅助函数获取 Getters 数据
templatediv classhome{{ myName }}/div
/templatescript
import { mapGetters } from vuexexport default {computed: {// 把 this.name 映射为 this.$store.getters.name...mapGetters({myName: name})}
}
/scriptMutations 同步修改 State
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。mutations 非常类似 Vue 在调用子组件时给子组件传递了数据子组件通过 $emit 通知父组件修改数据。都采用单向数据流的方式。
基础案例
定义 mutations
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {count: 0},mutations: {increment(state, payload) {state.count payload.num}}
})export default store提交载荷Payload
通过 $store.commit 进行调用 mutations并且可以传入额外的参数即 mutation 的载荷payload。
templatediv classhome{{ $store.state.count }}/div
/templatescript
export default {mounted() {setTimeout(() {this.$store.commit(increment, { num: 10 })}, 1000)}
}
/script通过 mapMutations 辅助函数获取 mutations 函数
你可以在组件中使用 this.$store.commit($mutationsName) 提交 mutation或者使用 mapMutations 辅助函数将组件中的 methods 映射为 $store.commit 调用。
templatediv classhome{{ $store.state.count }}/div
/templatescript
import { mapMutations } from vuex
export default {methods: {// 将 this.myIncrement() 映射为 this.$store.commit(increment)...mapMutations({myIncrement: increment})},mounted() {setTimeout(() {this.myIncrement({ num: 10 })}, 1000)}
}
/scriptMutation 需遵守 Vue 的响应式规则
既然 Vuex 的 store 中的状态是响应式的那么当我们变更状态时监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项例如最好提前在你的 Store 中初始化好所有所需的状态 State。 Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数并且内部的逻辑也是同步的。如果是异步的则导致状态无法被正常跟踪。
Actions 异步提交 Mutations
在 mutation 中混合异步调用会导致你的程序很难调试。例如当你调用了两个包含异步回调的 mutation 来改变状态你怎么知道什么时候回调和哪个先回调呢这就是为什么我们要区分这两个概念。在 Vuex 中mutation 都是同步事务都必须是即刻修改当前状态。
Actions 类似于 mutation它们之间不同的地方是Actions 提交的是 mutation而不是直接变更状态 state。Actions 是异步的函数内可以包含任意异步操作。
基础案例
定义 actions
import Vue from vue
import Vuex from vuexVue.use(Vuex)const store new Vuex.Store({state: {count: 0},mutations: {increment(state, payload) {state.count payload.num}},actions: {incrementAsync({ commit }, payload) {setTimeout(() {commit(increment, payload)}, 1000)}}
})export default store分发 actions
actions 通过 $store.dispatch 方法触发。
templatediv classhome{{ $store.state.count }}/div
/templatescript
export default {mounted() {this.$store.dispatch(incrementAsync, {num: 10})}
}
/script通过 mapActions 辅助函数获取 actions 函数
templatediv classhome{{ $store.state.count }}/div
/templatescript
import { mapActions } from vuexexport default {methods: {// 将 this.myIncrementAsync() 映射为 this.$store.dispatch(incrementAsync)...mapActions({myIncrementAsync: incrementAsync})},mounted() {this.myIncrementAsync({ num: 10 })}
}
/scriptModule 模块
由于使用相同的一个状态 State应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。
为了解决以上问题Vuex 允许我们将 store 分割成模块module。每个模块拥有自己的 state、getters、mutations、actions、module。
基础案例
定义 module
import Vue from vue
import Vuex from vuexVue.use(Vuex)const moduleA {namespaced: true,state: {count: 0,name: xiaoming},getters: {name(state) {return my name is state.name}},mutations: {increment(state, payload) {state.count payload.num}},actions: {incrementAsync({ commit }, payload) {setTimeout(() {commit(increment, payload)}, 1000)}}
}const store new Vuex.Store({modules: {a: moduleA}
})export default store通过 mapState 辅助函数获取 State 数据
templatediv classhome{{ name }}/div
/templatescript
import { mapState } from vuexexport default {computed: {// 把 this.name 映射为 this.$store.state.a.name...mapState({name: (state) state.a.name})}
}
/script通过 mapGetters 辅助函数获取 Getters 数据
templatediv classhome{{ myName }}/div
/templatescript
import { mapGetters } from vuexexport default {computed: {// 把 this.myName 映射为 this.$store.getters[a/name]...mapGetters({myName: a/name})}
}
/script通过 mapMutations 辅助函数获取 mutations 函数
templatediv classhome{{ $store.state.a.count }}/div
/templatescript
import { mapMutations } from vuex
export default {methods: {// 将 this.myIncrement() 映射为 this.$store.commit(a/increment)...mapMutations({myIncrement: a/increment})},mounted() {setTimeout(() {this.myIncrement({ num: 10 })}, 1000)}
}
/script通过 mapActions 辅助函数获取 actions 函数
templatediv classhome{{ $store.state.a.count }}/div
/templatescript
import { mapActions } from vuexexport default {methods: {// 将 this.myIncrementAsync() 映射为 this.$store.dispatch(a/incrementAsync)...mapActions({myIncrementAsync: a/incrementAsync})},mounted() {this.myIncrementAsync({ num: 10 })}
}
/script原文链接菜园前端
