文档章节

vuex的store管理和使用

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

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

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

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

wenxingjun
07/25
0
0
简述vue状态管理模式之vuex

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ 一、初始vuex 1.1 vuex是什么 那么先来看看这两个问题: 什么是vuex?官网说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 按个...

peakedness丶
11/30
0
0
Vue 应用单元测试的策略与实践 04 - Vuex 单元测试

Vue 应用单元测试的策略与实践 04 - Vuex 单元测试 一个有基本的UT知识和Vue组件单元测试经验的开发者🚶// When当他🚶阅读和练习本文的Vuex单元测试的部分// Then他能够对Vuex概念的理解...

吕立青
11/02
0
0
通过项目梳理vuex模块化 与vue组件管理

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

李赫feixuan
09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue-cli 3 分环境打包

在vue-cli3的项目中, npm run serve时会把process.env.NODE_ENV设置为‘development’; npm run build 时会把process.env.NODE_ENV设置为‘production’; 此时只要根据process.env.NODE_...

灰白发
7分钟前
1
0
集合初始化,泛型及相关操作

集合初始化通常进行分配容量,设置特定参数等相关工作,推荐在任何情况下,都需要显式地设定集合容量的初始大小。 ArrayList 使用无参构造时,默认大小为 10 ,也就是说在第一次add的时候,分...

Canaan_
16分钟前
1
0
Sping之项目中pofile的应用

工程中,我们必须要面对的一件事就是, 开发环境中使用的数据库连接地址等与生产上的不同, 如果上线, 那么我们是否还要手动修改这些地址么, 这样做有很多弊端, 不方便, 这时我们就可以使用spr...

克虏伯
24分钟前
0
0
Linux中安装MySQL

Linux中安装MySQL 一、准备工作 此处准备的操作系统位CentOS 7。 MySQL安装包: MySQL-server-5.6.29-1.linux_glibc2.5.x86_64.rpm MySQL-client-5.6.29-1.linux_glibc2.5.x86_64.rpm 将准备......

星汉
29分钟前
1
0
深入理解Hadoop之HDFS架构

Hadoop分布式文件系统(HDFS)是一种分布式文件系统。它与现有的分布式文件系统有许多相似之处。但是,与其他分布式文件系统的差异是值得我们注意的: HDFS具有高度容错能力,旨在部署在低成...

架构师springboot
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部