在Nuxt.js项目中,store目录下的每个.js文件会被转换成为状态树指定命名的子模块.而Index 是跟模块.
Nuxt.js内置引用了vuex模块,所以不需要额外安装.
Nuxt.js会尝试找到应用跟目录下的store 目录,如果该目录存在,它将会做以下的事情 :
1.引用 vuex 模块
2.将vuex 模块 加到 vendors 构建配置中去
3. 设置 Vue 根实例的 store 配置项
Nuxt.js 支持两种使用方式 store 的方式,你可以择一使用:
1. 普通方式 : store/index.js 返回一个Vuex.Store 实例
2. 模块方式 : store 目录下的每个 .js 文件会被转换成为状态树的指定命名的子模块,而index 则是根模块
这里只演示模块方式
使用状态树模块方式, store目录下的每个.js 不需要返回Vuex.Store 实例,而是应该直接将 state 区域、mutations区域 和 actions 区域暴露出来 :
在页面组件可以像这样是用user 模块 :
需要获取state区域的数据时需要这样才能获取
而需要获取mutations区域的数据时则需要先导入并解构vuex
vuex并不限制你的代码结构.但是,它规定了一些需要遵循的规则:
1. 应用层级的状态应该集中到单个 store 对象中。
2.提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
3. 异步逻辑都应该封装到 action 里面。
只需要遵循以上规则,如何组织代码随你便 . 如果你的store文件太大,只需要将 actions、
mutations 和 getter 分割到单独的文件 .
小总结 :
在vue文件中使用vuex
1. 在vue文件中,首先通过 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 来引入我们需要的模块,按需引用,只需要引入本页面用到的模块即可
2. mapGetters和mapState需要在页面的计算属性computed中引入, mapMutations和mapActions需要在methods中引入,此时要注意模块的命名空间,如果vuex文件导出时标注了namespaced,我们使用时也需要写出才可以找到,反之则不需要
3. 首先是mapState,使用mapState时,我有两种方法来取,两种方式都可以,这个方法是从store中取出这个变量,然后显示在此页面上,store变动的话,此页面也会跟着动态改变
4.mapGetters类似于store的计算属性,我们可以通过mapGetters的方法在store里进行计算,然后返回我们需要的结果即可
5.MapMutation 是更改store中状态的唯一方法,Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
6.mapAction类似于mutation, 但是Action提交的是 mutation,而不是直接变更状态,Action可以包含任意异步操作,我们一般把异步获取数据的方法都放在这里,然后在回调函数里使用mutation里的方法把异步获取的数据保存在store里,然后把store里的数据传到页面
这就是小喵在学习Vuex状态树时学到的知识
你Get到了吗?
(^_^)~喵~!!