vuex的store管理和使用

最新推荐文章于 2025-04-10 00:30:00 发布

转载最新推荐文章于 2025-04-10 00:30:00 发布 · 347 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yxmBetter/blog/1526163

文章标签：

#javascript #json #python #ViewUI

本文介绍了如何使用Vuex进行状态管理，包括安装配置Vuex、创建store模块、实现用户登录和登出等功能，并展示了实际代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

简述一下使用步骤，希望可以帮助到你。

创建并注入store(因为需使用分开管理，使用了vuex的modules管理)
- npm install --save vuex
- 创建

/*该文件为store总管理文件，一般在根目录下，名为store.js*/
import Vue from 'vue'
import VueX from 'vuex'
import user from './store/user' //这个是新创建的文件夹store下的user.js文件，存放store分文件user部分

Vue.use(VueX)
export default new Vuex.Store({
   modules: { user },
   state: {
       /*可以存放一些公用的不变的数据*/
       colors: ['red','black']
   },
   mutations:{}
})

/*该文件为store文件夹下的user.js文件，管理用户登录*/
import Vue from 'vue'
export const USER_SIGNIN = 'USER_SIGNIN'
export const USER_SIGNOUT = 'USER_SIGNOUT'
export default {
   state: JSON.parse(sessionStorage.getItem('user')) || {},
   mutations: {
       [USER_SIGNIN](state,user) {
           Object.assign(state,user)
            sessionStorage.setItem('user',JSON.stringify(state))
       },
       [USER_SIGNOUT](state) {
           Object.keys(state).forEach(k => Vue.delete(state,k))
            sessionStorage.removeItem('user')
       }
   },
   actions: {
       [USER_SIGNIN]({commit},user){
           commit(USER_SIGNIN,user)
       },
        [USER_SIGNOUT]({commit}){
           commit(USER_SIGNOUT)
       }
   }
}

- 注入
在全局App.vue文件中， new Vue（{新增 store}）

组件调用方式

/*在需要使用的vue文件中导入并使用*/
import store from './store'
import { USER_SIGNIN,USER_SIGNOUT } from 'store/user'
/*在该页面方法中*/
methods:{
   /*如果需要this上添加方法则使用下面的语句添加上*/
   ...mapActions([USER_SIGNIN])
    /*修改时*/
   store.commit(USER_SIGNIN,{你新增的对象数据})
}

加油

转载于:https://my.oschina.net/yxmBetter/blog/1526163