vue
nuxt中如何使用vuex-凯发ag旗舰厅登录网址下载
nuxt是一个基于vue.js的通用型框架,它集成了使用vue开发的绝大数组件/框架。
长话短说如何在vuex-store中获取异步数据呢?
在nuxt中由于集合了vuex还有其他的一些配置,大大的方便了我们使用vuex;在nuxt官方文档中写到:
在这里笔者为了方便使用了模块的方式去使用store;
1.1 首先现在store目录下新建.js文件,由于业务需求新建了几个模块的.js文件。
接下来我们一起看一下js文件中是如何新建模块方法的:
1.2 在state方法中初始化基本数据;
1.3 在mutation方法中更新数据
在mutations中会接收state作为第一个参数并且可以接收其他传参;(tips:一条重要的原则就是要记住 mutation 必须是同步函数。)
在组件中调用mutations中的方法改变状态树种的数据
1.4 在store里如何调用异步数据?
由于mutation方法中只能执行同步方法,如何在store中获取远程服务器中的数据呢?
在此vuex提供了一个解决方法action,action是一个类似于mutation的方法,它可以包含任何任意异步操作,不同之处在于action不能直接修改状态只能提交mutation;
在actions中定义好方法后需要在组件中使用store.dispatch进行触发;(tips:注意文件位置)
ps:在这里只是针对笔者的使用方式进行讨论,其他调用方式参考官方文档;
至此两种简单的改变状态树中的数据方法结束,后续笔者还会继续添加方法,如有错误请多多指教;
总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的nuxt中如何使用vuex-store异步获取数据的全部内容,希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇:
- 下一篇: