这个不知道能怎么叫不?现在对这块很迷。以下为个人理解

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的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  2. 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)

    任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...

  3. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  4. vue前端页面跳转参数传递及存储

    不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...

  5. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

  6. 使用Vue做个简单的评论 + localstorage存储

     1.引入Vue.js 2.编写代码 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta c ...

  7. 在Winform中直接录入表格数据和在Vue&Elment中直接录入表格数据的比较

    一般来说,录入数据的时候,我们都采用在一个窗体界面中,根据不同内容进行录入,但是有时候涉及主从表的数据录入,从表的数据有时候为了录入方便,也会通过表格控件直接录入.在Winform开发的时候,我们很多 ...

  8. 使用VUE+SpringBoot+EasyExcel 整合导入导出数据

    使用VUE+SpringBoot+EasyExcel 整合导入导出数据 创建一个普通的maven项目即可 项目目录结构 1 前端 存放在resources/static 下 index.html &l ...

  9. Vue学习笔记六:v-model 数据双向绑定

    目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...

随机推荐

  1. Linux性能优化实战(二)

    一.CPU使用率过高 1,CPU使用率 a>节拍率 为了维护CPU时间,Linux通过事先定义的节拍率(内核中表示为HZ),触发时间中断,并使用全局变量Jiffies记录开机以来的节拍数.每发生 ...

  2. Anacanda 与 jupyter 的使用

    内容概要 爬虫开发环境搭建 Anacanda 开发环境 jupyter jupyter 的基本使用 启动 基本使用 快捷键的使用 内容详细 一.爬虫开发环境搭建 1.Anacanda 开发环境 Ana ...

  3. Solution Set - 神奇 NOIP 模拟赛

    \[\mathfrak{\text{Defining }\LaTeX\text{ macros...}}\newcommand{\vct}[1]{\boldsymbol{#1}}\newcommand ...

  4. Solution -「Gym 102798I」Sean the Cuber

    \(\mathcal{Description}\)   Link.   给定两个可还原的二阶魔方,求从其中一个状态拧到另一个状态的最小步数.   数据组数 \(T\le2.5\times10^5\). ...

  5. Winds10 安装JDK8.0教程

    首先下载一个jdk,可以通过这个链接下载:https://pan.baidu.com/s/1aP6SdL8UQK_C2GvALLb6Wg也可以去官网下载:https://www.oracle.com/ ...

  6. 使用docker部署awx-1.7.1.0(ansible图形化界面)

    文章目录 关于环境 下载awx 下载安装所需依赖 安装docker-compose 配置inventory文件 出现的报错 TASK [local_docker : Run migrations in ...

  7. 深入MySQL(一):MySQL的组织架构

    今天开始将自己所学过的MySQL的知识都尝试融会贯通,并且用写博客的方式记录分享下来. 今天讲的主题是MySQL的组织架构,对于学习一个中间件或者开源项目而言,我觉得最重要的便是先知晓其组织架构,以一 ...

  8. 超简单集成 HMS ML Kit 实现最大脸微笑抓拍

    前言 如果大家对 HMS ML Kit 人脸检测功能有所了解,相信已经动手调用我们提供的接口编写自己的 APP 啦.目前就有小伙伴在调用接口的过程中反馈,不太清楚 HMS ML Kit 文档中的 ML ...

  9. 太骚了,用Excel玩机器学习

    最近发现了一个好玩的Python库,它可以将训练好的机器学习模型转换为Java.C.JavaScript.Go.Ruby,VBA 本地代码,可以让连Python和机器学习一无所知的同学也能感受预测的神 ...

  10. 学习Spring5必知必会(7)~Spring tx

    一.spring的事务管理 1.引出事务的经典例子:银行转账发生异常 ✿ 解决:把转出钱和转入钱的业务放到同一个事务空间. ■ 分析转账过程流程: ① 首先,获取 DataSource 对象: ② 其 ...