Vuex是什么？
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
什么是状态管理模式
包含以下几个部分：
- state,驱动应用的数据源
- view,以声明方式将state映射到视图
- actions,响应在view上的用户输入导致的状态变化
以下是一个表示“单向数据流”理念的简单示意：
`Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
store（仓库）
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
- 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
-
count:0 }, mutations:{ increment(state){ state.count++ } } }) ```
由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
vuex 仓库（store）的五大核心
- state ：专门存储共享数据的地方
- getters ： 针对现有 state 数据或者其余的 getter 数据做二次计算的数据，可以理解为仓库的计算属性
- mutations ： 唯一能够修改 state 数据的地方，并且只能写同步代码。
- actions ： 这里面可以写异步代码，如果如要修改 state 中的数据，必须通过调用 mutation 来修改
- modules ： 仓库模块的拆分
vuex 仓库中的四个辅助函数
- mapState() 获取 state 中的数据
- mapGetters() 获取 getters 中的数据
- mapMutations() 获取 mutations 配置项中同步修改 state 中数据的方法
- mapActions() 获取 actions 配置项中异步修改 state 中数据的方法
使用 vuex
-
在项目中安装 vuex
$ npm install vuex -
创建 src/store.js 文件，用来生成仓库的实例，并且生成的实例需要在 main.js 文件 new Vue() 中挂载
以下代码在 store.js 文件
// 引入 vue import Vue from 'vue' // 引入 vuex import Vuex from 'vuex' Vue.use(Vuex) // 创建仓库实例 const store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {} }) // 暴露 store export default store
组件中使用 state 与 getter
-
方案一：使用挂载到 Vue 原型上的 $store 对象，这个 $store 就是 new Vue.Store() 生成的仓库实例对象
// 直接在页面上使用时 $store.state.xxx || $store.getters.xxx -
方案二：在 computed 中使用
export default { computed: { data1 () { return this.$store.state.xxx // 获取 state 中的数据 }, data2 () { return this.$store.getters.xxx // 获取 getters 中的数据 } } } -
方案三：在 computed 中使用 辅助函数，辅助函数内部就是用上述方案二展开实现的
// 使用 辅助函数必需先引入 import { mapState, mapGetters } from 'vuex' export default { computed: { // mapState 接收一个数组做为参数，参数中的每一项，就是在仓库中的 state 数据 ...mapState(['state', 'state2']) // mapGetters 接收一个数组做为参数，参数中的每一项，就是在仓库中的 getter 数据 ...mapGetters(['getter1', 'getter2']) } } // 如果希望组件中数据与仓库中数据不同名，采用第二种方案即可
组件中修改 state 与 getter
注意：state 可以被修改，getter 不允许修改
-
同步修改 state ，需要仓库中提供对应修改 state 的 mutation 函数
-
方案一：使用 vuex 挂载到 vue 原型上的 $store 对象的 commit() 方法
// 直接在页面上使用时 $store.commit('updateNmae', payload) -
方案二：在 methods 中使用
export default { methods: { fn (payload) { // updateNmae 是仓库中 mutations 配置相中定义的函数名称，payload 传递过去的参数 this.$store.commit('updateName', payload) } } } -
方案三：在 methods 中使用 辅助函数，辅助函数内部就是用上述方案二展开实现的
// 使用 辅助函数必需先引入 import { mapMutations } from 'vuex' export default { methods: { // mapMutations 接收一个数组做为参数，参数中的每一项，就是在仓库中的 mutation 方法 ...mapMutations(['mutation1', 'mutation2']) } } // 调用时只需 mutation1(payload) 即可触发
mapState mapGetters 是用在 computed 上的
mapMutations mapActions 是用在 methods 上的
异步修改 state 数据
mutation 里面只允许同步的去修改 state 数据。（虽然在mutation中可以异步的去修改state数据不会报错，但是会导致时间旅行等机制没有效果）
context !! 当前上下文对象，一般就理解为当前 store 的实例
SYNCSETCURCITY(context, payload) {*
*// setTimeout(() => {});*
*// },*
一般就理解为当前 store 的实例
通过它能获取 context.state 获取 state
context.getters 获取 getters
context.commit() 提交 某个mutation
context.dispath() 派发 某个action
一般 context 会使用结构赋值的方式去使用
payload 触发这个 action 时传递过来的参数
-
异步修改 state ，需要仓库中提供对应修改 state 的 action 函数
-
方案一：使用 vuex 挂载到 vue 原型上的 $store 对象的 dispatch() 方法
// 直接在页面上使用时 $store.dispatch('actionName', payload) -
方案二：在 methods 中使用
export default { fn (payload) { setTimeOut(() => { this.$store.dispatch('actionName', payload) }, 1000) } } -
方案三： 在 methods 中使用 辅助函数，辅助函数内部就是用上述方案二展开实现的
// 使用 辅助函数必须先引入 import { mapActions } from 'vuex' export default { methods: { // mapActions 接收一个数组做为参数，参数中的每一项，就是在仓库中的 action 方法 ...mapActions(['action1', 'action2']) } } // 调用时只需 action1(payload) 即可触发
注意辅助函数的书写：mapState()、mapGetters() 书写在组件的 computed 配置项中，mapMutations()、mapActions() 书写在组件的 methods 配置项中
注意：为什么 vuex 中的 state 必须使用 mutation 来是修改：
为了以一种可以预见的方式去修改数据，不至于让数据难以理解
2. 为了实现时间旅行
vuex 中的 module
-
什么时候需要在 vuex 中使用 module
- 项目越做越大，功能点越写越多。需要使用 vuex 共享的数据越来越庞大时，就需要使用 module 来进行仓库模块拆分，拆分的每个模块都拥有自己的 state、mutation、action、getter，甚至是嵌套子模块
// 拆分的仓库 子模块A const moduleA = { state: { }, mutations: { }, actions: { }, getters: { } } // 拆分的仓库 子模块B const moduleB = { state: { }, mutations: { }, actions: { } } // 仓库根模块 const store = new Vuex.Store({ // 通过 modules 配置选项将拆分出去的子模块配置到根仓库中 modules: { aa: moduleA, bb: moduleB } }) store.state.aa // -> moduleA 的状态 store.state.bb // -> moduleB 的状态 -
仓库拆分子模块知道后，没有设置命名空间引起的问题
默认情况下，模块内部的 getter、mutation 、action是注册在全局命名空间的
- 多个子模块中的 getter 不能同名，否则会报错
- 多个子模块中的 mutation 如果同名的话，组件调用这个 mutation 时，都会被触发，会引起全局污染
- 多个子模块中的 action 如果同名的话，组件调用这个 action 时，都会被触发，会引起全局污染
-
由于上述问题，需要给每个子模块设置命名空间
-
给每个子模块的对象配置中添加一个 namespaced 属性即可，属性值为 true
// 拆分的仓库 子模块A const moduleA = { namespaced: true, // 给子模块设置命名空间 state: { }, mutations: { }, actions: { }, getters: { } } -
设置后，子模块中的 getter、mutation、action 是注册在自己命名空间中
-
-
设置了命名空间后，使用的时候需要加上仓库的名称
-
获取某个仓库子模块中的 state
// 1.直接页面上获取时 $store.state.xxx.stateKey // xxx 代表仓库子模块的名称 // 2.使用计算属性 computed: { data () { return this.$store.state.xxx.stateKey } } // 3.使用辅助函数 mapState() computed: { ...mapState('xxx', ['state1', 'state2']) // 原理：使用上述计算属性展开的 } // 注意：如果在组件中同时拿多个仓库子模块的同名 state 数据，应使用上面计算属性的方式 -
获取某个仓库子模块中的 getter
// 1.页面上直接使用 $store.getters['xxx/getterKey'] // 2.使用计算属性 computed: { data () { return this.$store.getters['xxx/getterKey'] } } // 3.使用辅助函数 mapGetters() computed: { ...mapGetters('xxx', ['getter1', 'getter2']) } -
提交摸个仓库子模块中的 mutation
// 1.页面上直接使用 $store.commit('xxx/mutationKey', payload) // 2.自定义函数中使用 methods: { fn (payload) { this.$store.commit('xxx/mutationKey', payload) } } // 3.使用辅助函数 mapMutations() methods: { ...mapMutations('xxx', ['mutation1', 'mutation2']) } -
派发某个仓库子模块中的 action
// 1.页面上直接使用 $store.dispatch('xxx/actionKey', payload) // 2.自定义函数中使用 methods: { fn (payload) { this.$store.dispatch('xxx/actionKey', payload) } } // 3.使用辅助函数 mapActions() methods: { ...mapActions('xxx', ['action1', 'action2']) }
仓库模块的局部状态
仓库模块做了拆分以后，getter与muration中的第一个参数是state是当前模块的局部state。
action中的第一个参数context.context中的state也是当前模块的布局state
有时我们需要在getter中action中去获取到其余模块的state数据
getter的语法
getters:{ //state - 当前模块的state //getters- 当前模块的getters //rootState - 根模块的state数据，根据他就可以方便的去获取到其余模块的state getter1(state,getters,rootState){ } }action 的语法
action :{ //context 是一个对象，这个对象有一些属性 //state - 当前模块的state //getters- 当前模块的getters //commit - 提交mutation的方法 //dispath - 派发action的方法 //rootState - 根模块的state数据，根据他就可以方便的去获取到其余模块的state getter1(commit，payload){ } }!mutation没有rootState这个东西 -
314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
