vue学习过程总结(06) - vue的数据存储store
这个不知道能怎么叫不?现在对这块很迷。以下为个人理解
store是状态管理,是一个对象,有其属性和方法。
常见的值有:state/mutations/actions/getters,
这几个值的意思:
- state :对数据的全局存储
- getter: 可以理解为computed ,对数据进行计算
- mutations :对数据的同步更改
- actions:对数据的异步更改
例如:
1.创建一个store对象。分为两个部分modules与函数组
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user' Vue.use(Vuex) const store = new Vuex.Store({
modules: {
app,
settings,
user
},
getters
}) export default store
2.函数组getters,来自getters.js
分别是取存储数据中app的菜单状态、机器的状态、用户token、用户avatar、用户名称(一些状态信息)
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name
}
export default getters
3.modules中的app来自app.js,里面有state/mutations/actions,getters文件中的sidebar,device方法就是取这个文件中的state中sidebar和device的值
import Cookies from 'js-cookie' const state = {
sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
withoutAnimation: false
},
device: 'desktop'
} const mutations = {
TOGGLE_SIDEBAR: state => {
state.sidebar.opened = !state.sidebar.opened
state.sidebar.withoutAnimation = false
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
},
CLOSE_SIDEBAR: (state, withoutAnimation) => {
Cookies.set('sidebarStatus', 0)
state.sidebar.opened = false
state.sidebar.withoutAnimation = withoutAnimation
},
TOGGLE_DEVICE: (state, device) => {
state.device = device
}
} const actions = {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
closeSideBar({ commit }, { withoutAnimation }) {
commit('CLOSE_SIDEBAR', withoutAnimation)
},
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
}
} export default {
namespaced: true,
state,
mutations,
actions
}
4.同理,其中const { showSettings, fixedHeader, sidebarLogo } = defaultSettings是设置showSettings, fixedHeader, sidebarLogo的初始值,这些值写在settings.js文件中
import defaultSettings from '@/settings' const { showSettings, fixedHeader, sidebarLogo } = defaultSettings const state = {
showSettings: showSettings,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
} const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) {
state[key] = value
}
}
} const actions = {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
}
} export default {
namespaced: true,
state,
mutations,
actions
}
5.modules中的user来自文件user.js,这个文件除state/mutations/actions外还有几个方法
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router' const state = {
token: getToken(),
name: '',
avatar: ''
} const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
} const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
}, // get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response if (!data) {
reject('Verification failed, please Login again.')
} const { name, avatar } = data commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
}, // user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
removeToken()
resetRouter()
resolve()
}).catch(error => {
reject(error)
})
})
}, // remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
} export default {
namespaced: true,
state,
mutations,
actions
}
详细文档:https://vuex.vuejs.org/zh/
vue学习过程总结(06) - vue的数据存储store的更多相关文章
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...
- vue学习记录:vue引入,validator验证,数据信息,vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
- vue 缓存的keepalive页面刷新数据
用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...
- 使用Vue做个简单的评论 + localstorage存储
1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...
- 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较
一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入.在Winform开发的时候,我们很多 ...
- 使用VUE+SpringBoot+EasyExcel 整合导入导出数据
使用VUE+SpringBoot+EasyExcel 整合导入导出数据 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html &l ...
- Vue学习笔记六:v-model 数据双向绑定
目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...
随机推荐
- Pandas常用操作 - 新增数据列
初始化测试数据 df = pd.DataFrame({'stu_name': ['Nancy', 'Tony', 'Tim', 'Jack', 'Lucy'], 'stu_age': [17, 16, ...
- 在MacOS安装puppeteer
安装node:升级:npm i npm 安装yarn:需要注意先把yarn的流程跑完,特别是package.json 安装puppeteer:yarn add puppeteer 安装完成以后需要重启 ...
- Hyperledger Fabric 2.x 自定义智能合约
一.说明 为了持续地进行信息的更新,以及对账本进行管理(写入交易,进行查询等),区块链网络引入了智能合约来实现对账本的访问和控制:智能合约在 Fabric 中称之为 链码,是区块链应用的业务逻辑. 本 ...
- Linux基础:操作系统的启动
Centos6: # 1.加电自检(BIOS)# 2.MBR引导(512k)dd </dev/zero >/dev/sda bs=1k count=400 # 3.GRUB菜单(选择系统) ...
- 抓取并解密HTTPS流量
WireShark Wireshark解密TLS数据流,从网上已有资料来看,主要是两种方式:一是服务端私钥直接解密,二是使用SSLKEYLOGFILE获取握手过程中的会话密钥信息进行解密. 这 ...
- 5.Flink实时项目之业务数据准备
1. 流程介绍 在上一篇文章中,我们已经把客户端的页面日志,启动日志,曝光日志分别发送到kafka对应的主题中.在本文中,我们将把业务数据也发送到对应的kafka主题中. 通过maxwell采集业务数 ...
- 关于TP90 TP99 等常用于评估软件系统的处理性能的指标概念
工作中还是蛮少直接接触到评估系统性能的,但是不妨碍有兴趣了解.认为这是常识,只是个人才疏学浅不了解其定义. TP=Top Percentile,Top百分数,是一个统计学里的术语,与平均数.中位数都是 ...
- Mybatis获取自增主键的两种方式
<insert id="saveOne" parameterType="com.buwei.entity.User" > INSERT into u ...
- 字符串压缩(一)之ZSTD
前言 最近项目上有大量的字符串数据需要存储到内存,并且需要储存至一定时间,于是自然而然的想到了使用字符串压缩算法对"源串"进行压缩存储.由此触发了对一些优秀压缩算法的调研. 字符串 ...
- 【C# 线程】转载 句柄的基本概念 .NET对象与Windows句柄
转载自:https://www.cnblogs.com/silverb/p/5300255.html 句柄的基本概念 1.句柄就是进程句柄表中的索引.2.句柄是对进程范围内一个内核对象地址的引用,一个 ...