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

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: ‘<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(()=>{

            存入完成后的执行回调，在这里再去取参数就不会为空

        })