vuex常用实战代码（同步+异步）

gclove 发布于2019-08-23 14:08 / 2699人阅读

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

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

仓库写法(store.js)

1.引入部分

import Vue from "vue"    //引入vue
import Vuex from "vuex"    //引入vuex

Vue.use(Vuex)    //    vue使用vuex

2.存储写法

const state = {
    dyrouter:"",
}

const mutations = {
    SET_DYNAMIC_ROUTER(state,value){
        state.dyrouter = value
    },
}
const getters = {
    dyrouter: state => state.dyrouter,
}
const actions = {        //异步写法，返回promise对象
    setdynamicrouter({commit},data){
        return new Promise(resolve => {
            commit("SET_DYNAMIC_ROUTER",data)
            resolve()
        })
    },
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

截图参考

vue中引入

main.js中写法

import store from "./store.js"    //看store的文件在哪里引入

new Vue({
  el: "#app",
  router,
  store,                //vue中注册组件
  components: { App },
  template: ""
})

vue使用仓库读取、写入（同步）

1.读取

（方法一）

import { mapState } from "vuex"        //引入mapState

computed: {
            ...mapState([
                "dyrouter"
            ]),
        },

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

（方法二）

import store from "@/store"    //引入store

store.getters.dyrouter            //读取store仓库里的dyrouter参数

2.写入

import { mapMutations } from "vuex"

methods: {
            ...mapMutations([                           //引入mapMutations
                "SET_DYNAMIC_ROUTER"                    //引入vuex里面的函数方法
            ]),
            this.SET_DYNAMIC_ROUTER("传入的参数");        //使用该方法
}

vue使用仓库写入（异步）

import store from "@/store"        //引入store

store.dispatch("setdynamicrouter","传入的参数").then(()=>{
            存入完成后的执行回调，在这里再去取参数就不会为空
        })

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

GPU云服务器云服务器同步和异步同步与异步同步回调和异步回调同步调用和异步调用

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

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

vuex常用实战代码（同步+异步）

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

henry14 2019-08-30 15:54 评论0 收藏0
vuex常用实战代码（同步+异步）

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

junnplus 2019-08-02 13:55 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

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

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

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

Carson 2019-07-31 10:21 评论0 收藏0