vuex commit 模块_vuex 最详细学习笔记
Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。一、vuex 安装npm install vuex --save二、导入...
Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
一、vuex 安装
npm install vuex --save
二、导入 vuex 包
import Vuex from 'vuex'Vue.use(Vuex)
三、创建store 对象
const store = new Vuex.Store({ state:{ count:0 }})
四、将store对象挂载到vue实例中
new vue({ el:'#app', render:h=>h(app), router, // 将创建的共享数据对象,挂载到vue实例中 // 所有的组件,就可以直接从store中获取全局的数据了 store })
五、vuex中的核心概念
1、state
state提供唯一的公共数据源,所有共享的数据都要统一放到store的state中进行存储。
// 创建store数据源,提供唯一公共数据 const store = new Vuex.Store({ state:{ count:0 } }) // 组件访问state中数据的第一种方式: this.$store.state.全局数据名称 // 组件访问state中数据的第二种方式(通过辅助函数): // 1、从vuex中按需导入mapState函数 import {mapState} from 'vuex' // 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性 // 2、将全局数据,映射为当前组件的计算属性 computed:{ ...mapState(['count']) // 或者 ...mapState({ current: (state) => state.tab.currentMenu, }), }
2、Mutation
Mutation用于变更store中的数据
1)、只能通过mutation变更store数据,不可以直接操作store中的数据。
2)、通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
// 定义Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ // 变更状态 state.count++ } } }) // 触发mutation methods:{ handel(){ // 触发 mutations 的第一种方式 this.$store.commit('add') } }
// 可以在触发 mutations 是传递参数 // 定义Mutation const store = new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ // 变更状态 state.count += step } } }) // 触发 mutation methods:{ handel2(){ // 在调用 commit 函数,触发 mutations 时携带参数 this.$store.commit('add',3) } }
触发mutation的第二中方式:
// 1)、从 vuex 中按需导入 mapMutations 函数 import { mapMutations } from 'vuex'// 通过刚才导入的mapMutations函数,将需要的mutation函数,映射为当前组件的methods方法: methods:{ ...mapMutations(['add','addN']) }
3、Action
Action用于处理异步任务
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。
// 定义Action const store = new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ // 变更状态 state.count ++ } }, actions:{ addAsyns(context){ setTimeout(()=>{ contexxt.commit('add') },1000) } } })// 触发Action methods:{ handel(){ // 触发 actions 的第一种方式 this.$store.dispatch('addAsync') } }
触发actions异步任务时携带参数:
// 定义Action const store = new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ // 变更状态 state.count += step } }, actions:{ addAsyns(context,step){ setTimeout(()=>{ contexxt.commit('add',step) },1000) } } })// 触发Action methods:{ handel(){ // 在调用 dispatch 函数,触发 actions 时携带参数 this.$store.dispatch('addAsync',5) } }
触发actions的第二种方式:
// 1)、从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex'// 2)、通过刚才导入的 mapActions 函数,将需要的actions 函数,映射为当前组件的methods方法: methods:{ ...mapActions(['addAsync','addNAsync']) }
4、Getter
getter 用于对store中的数据进行加工处理形成新的数据。类似于计算属性computed
1)、getter可以对store中已有的数据加工处理之后形成新的数据,类似vue的计算属性。
2)、store中的数据发生变化,getter的数据也会跟着变化。
// 定义getter const store = new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ // 变更状态 state.count += step } }, getters:{ snowNum:state=>{ return '当前最新的数量是【'+ state.count +'】' } } })
// 使用getters的第一种方式: this.$store.getters.名称 // 使用getters的第二种方式: import {mapGetters} from 'vuex' computed:{ ...mapGetters(['showNum']) }
5、Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
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 的状态
在项目中 module 的使用:
store/index.js :
import Vue from 'vue'import Vuex from 'vuex'// 引入tab.jsimport tab from './tab.js'Vue.use(Vuex)export default new Vuex.Store({ modules: { tab }})
store/tab.js :
export default { state: { menu: [], // 点击的菜单 currentMenu: null }, mutations: { selectMenu(state, val) { // state.currentMenu = val; val.name === 'home' ? state.currentMenu = null : state.currentMenu = val; } }, actions: {}, modules: {}}
六、vuex 数据在页面刷新后数据丢失问题
解决方法:在APP.vue文件的created生命周期中加入以下代码即可:
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem("store")) ) ); } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(this.$store.state)); });
总结:
1、vuex主要包括以下几个模块:
State:定义了应用状态的数据结构,可以在这里设置默认的初始状态。
Getter:允许组件从 Store 中获取数据,mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation:是唯一更改 store 中状态的方法,且必须是同步函数。
Action:用于提交 mutation,而不是直接变更状态,可以包含任意异步操作。
Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
2、什么情况下使用 Vuex?
如果应用够简单,最好不要使用 Vuex,一个简单的 store 模式即可
需要构建一个中大型单页应用时,使用Vuex能更好地在组件外部管理状态
3、Vuex和单纯的全局对象有什么区别?
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
4、为什么 Vuex 的 mutation 中不能做异步操作?
Vuex中所有的状态更新的唯一途径都是mutation,异步操作通过 Action 来提交 mutation实现,这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来,然后就可以实现 time-travel 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难
5、vuex的action有返回值吗?返回的是什么?
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise
Action 通常是异步的,要知道 action 什么时候结束或者组合多个 action以处理更加复杂的异步流程,可以通过定义action时返回一个promise对象,就可以在派发action的时候就可以通过处理返回的 Promise处理异步流程。
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。
6、为什么不直接分发mutation,而要通过分发action之后提交 mutation变更状态?
mutation 必须同步执行,我们可以在 action 内部执行异步操作
可以进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)
7、从vuex中获取的数据能直接更改吗?
从vuex中取的数据,不能直接更改,需要浅拷贝对象之后更改,否则报错;
8、Vuex的严格模式是什么,有什么作用,怎么开启?
在严格模式下,无论何时发生了状态变更且不是由mutation函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
在Vuex.Store 构造器选项中开启,如下:
const store = new Vuex.Store({ strict:true,})
9、mutation和action有什么区别
action 提交的是 mutation,而不是直接变更状态。mutation可以直接变更状态
action 可以包含任意异步操作。mutation只能是同步操作
提交方式不同
action 是用this.store.dispatch('ACTION_NAME',data)来提交。mutation是用this.$store.commit('SET_NUMBER',10)来提交
接收参数不同,mutation第一个参数是state,而action第一个参数是context,其包含了
{ state, // 等同于 `store.state`,若在模块中则为局部状态 rootState, // 等同于 `store.state`,只存在于模块中 commit, // 等同于 `store.commit` dispatch, // 等同于 `store.dispatch` getters, // 等同于 `store.getters` rootGetters // 等同于 `store.getters`,只存在于模块中}
10、在v-model上怎么用Vuex中state的值?
需要通过computed计算属性来转换。
"message">// ...computed: { message: { get () { return this.$store.state.message }, set (value) { this.$store.commit('updateMessage', value) } }}
更多推荐
所有评论(0)