脚本宝典收集整理的这篇文章主要介绍了vuex常用实战代码（同步+异步），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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中引入

1. main.js中写法

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

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

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(()=>{
            存入完成后的执行回调，在这里再去取参数就不会为空
        })

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

脚本宝典总结

以上是脚本宝典为你收集整理的vuex常用实战代码（同步+异步）全部内容，希望文章能够帮你解决vuex常用实战代码（同步+异步）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。