文档章节

vuex的store管理和使用

YXMBetter
 YXMBetter
发布于 2017/08/30 14:59
字数 299
阅读 38
收藏 1
点赞 0
评论 0

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

  • 创建并注入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
粉丝 8
博文 162
码字总数 106484
作品 0
昌平
程序员
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
大型Vuex应用程序的目录结构

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

Fundebug
06/13
0
0
从概念到实际项目__vuex指北

1,核心概念 1.1 State: 用于数据的存储,是store中的唯一数据源,类似vue中data对象. 单一状态树:用一个对象就包含了所有应用层级状态.每个应用就只包含一个store实例. 计算属性:由于Vuex的状...

suchName
06/25
0
0
[译]为什么 VueX 是前端与 API 之间的完美接口

原文地址:Why VueX Is The Perfect Interface Between Frontend and API 原文作者:KBall 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zhmhhu 校对者:sunui, Te...

zhmhhu
06/04
0
0
vue2.0手把手教你开发商户管理端后台(三)之如何使用vuex+sessionStorage保存登录信息

写在前面: 项目地址:GitHub - jianjiayi/Merchant: vue全家桶开发商户后台管理,vue2.0手把手教你开发商户管理端后台 有什么不明白的,可以发邮件给我: m13121378101@163.com 一、什么是v...

菅双朋13121378101
05/25
0
0
vue-cli+vuex+axios请求数据

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 vuex 来管理数据,今天就带大家一起来学习一下 如何在 vuex 中利用 axios 请求数据 安装vuex 和 axios ,这里的安...

周瑾ruiqi
05/20
0
0
Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1
05/05
0
0
vuex其实超简单,喝完这3步,还有3步

上一篇 vuex其实超简单,只需3步 简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上, 如果你没看过上篇,请戳链接过去先看一下再回来,否则,你会觉...

Noahlam
05/21
0
0
真正掌握vuex的使用方法(二)

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍! 接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票...

张培跃
05/17
0
0
已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async

github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管理后端接口 | 获取数据 | 请求数据,已包含vue-router,v...

liangfengbo
05/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部