资讯专栏INFORMATION COLUMN

vuex常用实战代码(同步+异步)

gclove / 2862人阅读

摘要:的几个项目中也使用过,总结一下,方便使用仓库写法引入部分引入引入使用存储写法异步写法,返回对象截图参考中引入中写法看的文件在哪里引入中注册组件使用仓库读取写入同步读取方法一引入直接可以在视图中绑定参数方法二引入读取仓库里的参数写入引入引入里

vue的几个项目中也使用过vuex,总结一下,方便使用

仓库写法(store.js)

1.引入部分

</>复制代码

  1. import Vue from "vue" //引入vue
  2. import Vuex from "vuex" //引入vuex
  3. Vue.use(Vuex) // vue使用vuex

2.存储写法

</>复制代码

  1. const state = {
  2. dyrouter:"",
  3. }
  4. const mutations = {
  5. SET_DYNAMIC_ROUTER(state,value){
  6. state.dyrouter = value
  7. },
  8. }
  9. const getters = {
  10. dyrouter: state => state.dyrouter,
  11. }
  12. const actions = { //异步写法,返回promise对象
  13. setdynamicrouter({commit},data){
  14. return new Promise(resolve => {
  15. commit("SET_DYNAMIC_ROUTER",data)
  16. resolve()
  17. })
  18. },
  19. }
  20. export default new Vuex.Store({
  21. state,
  22. mutations,
  23. getters,
  24. actions
  25. })

截图参考

vue中引入

main.js中写法

</>复制代码

  1. import store from "./store.js" //看store的文件在哪里引入
  2. new Vue({
  3. el: "#app",
  4. router,
  5. store, //vue中注册组件
  6. components: { App },
  7. template: ""
  8. })
vue使用仓库读取、写入(同步)

1.读取

(方法一)

</>复制代码

  1. import { mapState } from "vuex" //引入mapState
  2. computed: {
  3. ...mapState([
  4. "dyrouter"
  5. ]),
  6. },

直接可以在视图中绑定"dyrouter"参数

(方法二)

</>复制代码

  1. import store from "@/store" //引入store
  2. store.getters.dyrouter //读取store仓库里的dyrouter参数

2.写入

</>复制代码

  1. import { mapMutations } from "vuex"
  2. methods: {
  3. ...mapMutations([ //引入mapMutations
  4. "SET_DYNAMIC_ROUTER" //引入vuex里面的函数方法
  5. ]),
  6. this.SET_DYNAMIC_ROUTER("传入的参数"); //使用该方法
  7. }
vue使用仓库写入(异步)

</>复制代码

  1. import store from "@/store" //引入store
  2. store.dispatch("setdynamicrouter","传入的参数").then(()=>{
  3. 存入完成后的执行回调,在这里再去取参数就不会为空
  4. })

以上总结仅为个人常用到的,更多详见官网

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100139.html

相关文章

  • vuex常用实战代码同步+异步

    摘要:的几个项目中也使用过,总结一下,方便使用仓库写法引入部分引入引入使用存储写法异步写法,返回对象截图参考中引入中写法看的文件在哪里引入中注册组件使用仓库读取写入同步读取方法一引入直接可以在视图中绑定参数方法二引入读取仓库里的参数写入引入引入里 vue的几个项目中也使用过vuex,总结一下,方便使用 仓库写法(store.js) 1.引入部分 import Vue from vue ...

    henry14 评论0 收藏0
  • vuex常用实战代码同步+异步

    摘要:的几个项目中也使用过,总结一下,方便使用仓库写法引入部分引入引入使用存储写法异步写法,返回对象截图参考中引入中写法看的文件在哪里引入中注册组件使用仓库读取写入同步读取方法一引入直接可以在视图中绑定参数方法二引入读取仓库里的参数写入引入引入里 vue的几个项目中也使用过vuex,总结一下,方便使用 仓库写法(store.js) 1.引入部分 import Vue from vue ...

    junnplus 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    Carson 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<