文档章节

vuex的store管理和使用

YXMBetter
 YXMBetter
发布于 2017/08/30 14:59
字数 299
阅读 42
收藏 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
博文 164
码字总数 107360
作品 0
昌平
程序员
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
07/25
0
0
通过项目梳理vuex模块化 与vue组件管理

故事: 其实很久一段时间想通过一个简单的项目学习vuex以及vue组件里面的细节知识点 因此在工作之余写了一个非常简单以及粗暴的案例来加深记忆,案例涉及到 等 vuex模块化的使用: 安装vuex ...

李赫feixuan
09/03
0
0
Vuex持久化插件-解决刷新数据消失的问题

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件-vuex-persistedstate。 欢迎来点点我的个...

hollyDysania
08/02
0
0
大型Vuex应用程序的目录结构

译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译...

Fundebug
06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部