最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

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

XAMPP下载 admin 1267浏览 0评论
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
})
截图参考
QQ截图20181218151632
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(()=>{
            存入完成后的执行回调,在这里再去取参数就不会为空
        })

转载请注明:XAMPP中文组官网 » vuex常用实战代码(同步+异步)

您必须 登录 才能发表评论!