首页 > 其他 > 详细

Vue 的状态管理工具 Vuex(Vuex的安装与使用)

时间:2020-08-26 15:28:59      阅读:90      评论:0      收藏:0      [点我收藏+]

安装:

vuex npm install vuex --save

使用

在 src 目录下新建文件夹 store,再在新建文件夹下新建 index.js 文件,这个文件我们用来写一些模块并导出 store 的文件,代码示例:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        loginStatus: 0, //登录状态 0未登录 1已登陆
        //token:‘‘,
        //userId:‘‘,
        //homeRole:‘‘,
        //row:‘‘
    },
    mutations:{
        changeToken(state,token){
            state.token =  token
            // console.log(state.token,9999)
        },
        userId(state,userId){
            state.userId = userId;
            // console.log(state.userId,9999)
        },
        homeRole(state,homeRole){
            state.homeRole = homeRole;
            // console.log(state.homeRole,9999)
        },
        articleEditData(state,row){
            state.articleEditData = row;
            // console.log(‘state.articleEditData‘,state.articleEditData)
        }
    },
    actions:{

    }
})

在main.js文件中使用(我把此部分代码写到了router/index.js文件里):

import store from ‘../store/index‘
//...

router.beforeEach((to, from, next) => {

    if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
        var mytoken = store.state.token;
        var localStorage =window.localStorage.getItem(‘token‘);

        if(!mytoken && !localStorage){
            next({
            path: ‘/login‘,
            query: {redirect: to.fullPath}  // 将跳转的路由path作为参数,登录成功后跳转到该路由
            })
        }else{
            next();
        }
    }else {
      next();
    }
  });

//...
 export default router;

在 vue 组件中使用():

// 存储token
var msn = res.data.message;
vm.$store.commit(‘changeToken‘,msn)   //存储token
vm.$store.commit(‘userId‘,userId)     //存储userId
window.localStorage.setItem(‘token‘, msn)   //将token存到本地
window.localStorage.setItem(‘userId‘, userId)    //将用户的userId存到本地

 

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        loginStatus0, //登录状态 0未登录 1已登陆
        token:‘‘,
        userId:‘‘,
        homeRole:‘‘,
        row:‘‘
    },
    mutations:{
        changeToken(state,token){
            state.token =  token
            // console.log(state.token,9999)
        },
        userId(state,userId){
            state.userId = userId;
            // console.log(state.userId,9999)
        },
        homeRole(state,homeRole){
            state.homeRole = homeRole;
            // console.log(state.homeRole,9999)
        },
        articleEditData(state,row){
            state.articleEditData = row;
            // console.log(‘state.articleEditData‘,state.articleEditData)
        }
    },
    actions:{

    }
})

Vue 的状态管理工具 Vuex(Vuex的安装与使用)

原文:https://www.cnblogs.com/meiyanstar/p/13565122.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!