文档章节

vuex的store管理和使用

YXMBetter
 YXMBetter
发布于 2017/08/30 14:59
字数 299
阅读 47
收藏 1

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

  • 创建并注入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,{你新增的对象数据})
}
  • 加油

© 著作权归作者所有

YXMBetter
粉丝 9
博文 173
码字总数 111562
作品 0
昌平
程序员
私信 提问
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃
2018/05/17
0
0
为管理复杂组件状态困扰?试试 vue 简单状态管理 Store 模式

在 vue 中,通信有几种形式: 父子组件 emit/on vuex 中共享 state 跨组件 EventBus 文档中的提到的 Store 模式却鲜有人去使用讨论。笔者在研究 ElementUI的Table组件的代码组织方式,以及在...

sarva
05/10
0
0
[Vuex系列] - 初尝Vuex第一个例子

Vuex是什么? Vuex是一个专为vue.js应用程序开发的状态管理库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 通过定义和隔离状态管理中的...

王小端coder
04/21
0
0
vuex-stepbystep 经典案例,详细注释一步到位

系列文章 [juejin.im/post/5c0e45…]vue-admin 详细注释,必须手把手做项目系列之(一 [juejin.im/post/5c1609… 详细注释,必须手把手做项目系列之(二) [juejin.im/post/5c18db…]vue-ad...

why前端_小牛_到犀牛
2018/12/23
0
0
说说如何使用 Vuex 进行状态管理

1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view)。当通过 methods 中的方法更新数据时,视图也会自动更新。 message.vue 效果: 这个示例中的 message 与 changeMessag...

deniro
04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

我的Linux系统开始学习的过程

Linux系统,不知大家是否了解。接触计算机不多或对计算机不感冒的人可能对其比较陌生,曾经的我也是。上大学前的我的确对Linux一无所知,那时候接触面窄,都没有听说过此名字,上了大学后,身...

xiangyunyan
12分钟前
0
0
第三讲:验证码点击刷新

前面两讲里面的验证码是无法通过点击刷新的,只能通过刷新页面进行验证码的刷新。有时候我们生成的验证码比较复杂导致用户看不清的时候,用户可以通过点击验证码图片的方式进行验证码的刷新。...

一匹狼工作室
15分钟前
10
0
Iqueryable.skip问题

int[] grades = { 1, 2, 3, 4, 5, 6, 7, 8 };// 59, 82, 70, 56, 92, 98, 85 }; int rd = grades.Length; var iqg = grades.AsQueryable().OrderBy((q)=>q); ......

whoisliang
16分钟前
0
0
nginx常见报错

nginx默认上传的请求体最大为1M,通过设置client_max_body_size即可修改:

城市之雾
17分钟前
0
0
springcloud服务网关Zuul高级篇 学习记录-纯洁的微笑

之前已经集成了网关,并且已经抽离优化成一个服务,现在看他的高级部分。Zuul还有更多的应用场景,比如:鉴权、流量转发、请求统计等等,这些功能都可以使用Zuul来实现。 1.鉴权-自定义Filte...

夜中孤影
20分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部