Vue从零开始之Vuex
文章目录Vuex 状态管理安装并导入登录状态管理sessionStorage的方法添加状态判断用户是否登录配置 Vuex存储用户信息到vuexstate数据响应式渲染mapState 辅助函数对象展开运算符mutations使用常量作为函数名调用actions异步操作 执行成功/失败时回调浏览器刷新 Vuex 数据消失手动解决问题描述解决方案修改代码使用vuex-persistedstate持久化
文章目录
Vuex 状态管理
Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex就是响应式的管理组件间共享的数据(如token,用户名称,位置信息等等).
安装并导入
Vuex 依赖 Promise
//在项目根目录执行如下命令来安装 Vuex
npm install vuex --save --registry=https://registry.npm.taobao.org
//修改 main.js 文件,导入 Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
登录状态管理
我们利用路由钩子 beforeEach 来判断用户是否登录,期间会用到 sessionStorage (浏览器存储方式的一种).
sessionStorage的方法
//往sessionStorage中设置键值对, 值只能为字符串,可用JSON.stringify()转成json字符串.
sessionStorage.setItem('isLogin', 'true');
//从sessionStorage中获取某个键值对的值
let isLogin = sessionStorage.getItem('isLogin');
//清空sessionStorage
sessionStorage.clear();
添加状态判断用户是否登录
在表单验证成功方法内添加
// 设置用户登录成功
sessionStorage.setItem('isLogin', 'true');
在main.js中利用路由钩子 beforeEach 方法判断用户是否成功登录
// 在每个路由跳转前执行,router为import导入的路由配置的名字
router.beforeEach((to, form, next) => {
// 获取用户登录状态 let块级变量
let isLogin = sessionStorage.getItem('isLogin');
// 注销
if (to.path == '/logout') {
// 清空
sessionStorage.clear();
// 跳转到登录
next({path: '/login'});
}
// 如果请求的是登录页
else if (to.path == '/login') {
if (isLogin != null) {
// 跳转到首页
next({path: '/main'});
}
}
// 如果为非登录状态
else if (isLogin == null) {
// 跳转到登录页
next({path: '/login'});
}
// 下一个路由
next();
});
配置 Vuex
创建 Vuex 配置文件在 src 目录下创建一个名为 store 的目录并新建一个名为 index.js 文件用来配置 Vuex,代码如下:
Store的属性:
- state: 存放共享的数据
- 虽然也可以直接获取和改变state的值,但官方不推荐这样做.因为直接修改时无法使用Devtools浏览器插件进行监控管理.
- getters: 用来获取并计算state的值,和计算属性一样缓存计算好的值
- mutations: 定义改变state值的函数,但不要写异步的代码
- mutations中使用异步代码修改的state数据,Devtools工具无法监控管理
- actions: 用于异步执行mutations中的函数
- module: 模块化
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 全局 state 对象,用于保存所有组件的公共数据
const state = {
// 定义一个 user 对象
// 在组件中是通过 this.$store.state.user 来获取
user: {
username: '',
age: 10
}
};
// 实时监听 state 值的最新状态,注意这里的 getters 可以理解为计算属性
const getters = {
// 在组件中是通过 this.$store.getters.getUser 来获取
getUser(state) {
return state.user;
}
// getters对象中获取 getters对象
getUserSum(state,getters) {
return getters.getUser.length
}
// 接收调用时传入的参数,不能直接写在方法()中
// $store.getters.moreAgeStu(8)
moreAgeStu(state){
// 只能通过return 一个函数来接收参数
return function(age){
return state.user.filter(s => s.age > age)
}
}
};
// 定义改变 state 初始值的方法,这里是唯一可以改变 state 的地方,缺点是只能同步执行的代码
const mutations = {
// 在组件中是通过 this.$store.commit('updateUser', user); 方法来提交 mutations
updateUser(state, user) {
state.user = user;
}
// 特殊的提交方式
this.$store.commit({
type: 'updateUser',
user
})
updateUser(state, payload) {
// payload是提交的整个对象包含type和user
}
};
// 定义触发 mutations 里函数的方法,可以异步执行 mutations 里的函数
const actions = {
// 在组件中是通过 this.$store.dispatch('asyncUpdateUser', user); 来调用 actions
asyncUpdateUser(context, user) {
//通过 context.state 和 context.getters 来获取 state 和 getters。(但不推荐在actions中操作 state)
//通过 context.commit() 执行mutations中的函数
context.commit('updateUser', user);
}
};
// Store 注意 S 大写
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
挂载Vuex,修改 main.js 增加刚才配置的 store/index.js,关键代码如下:
import store from './store'
new Vue({
el: '#app',
store
});
存储用户信息到vuex
在用户登录后将信息添加到state中
this.$store.dispathc('asyncUpdateUser', user);
获取用户信息并显示
{{this.$store.getters.getUser.username}}
state数据响应式渲染
在state中直接初始化好的数据默认就会响应式更新
// 非响应式的 添加/删除
对象['属性']='值' //对象添加属性
delete 对象.属性 //删除对象指定属性
// 响应式的 添加/删除
Vue.set(要修改的数组,索引值,修改后的值)
Vue.set(对象,'属性',值)
Vue.delete(对象,属性)
mapState 辅助函数
当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
对象展开运算符
mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符... 将此对象混入到外部对象中
...mapState({
// ...
})
}
mutations使用常量作为函数名
防止调用时因为写错字母导致出错
// changliang.js
export const INCREMENT = 'increment'
// /store/index.js Vuex配置文件
import {INCREMENT} from '../changliang.js';
const mutations = {
// 使用变量作为方法名
[INCREMENT](state) {
}
};
// 调用页面
import {INCREMENT} from '../changliang.js';
$store.commit(INCREMENT)
调用actions异步操作 执行成功/失败时回调
- 普通方式
this.$store.dispatch('asyncUpdateUser',{
message: {
name: 'zhangsan'
},
success: ()=>{
console.log('执行完毕手动回调')
}
})
const actions = {
asyncUpdateUser(context, payload) {
setTimeout(()=>{
context.commit('updateUser', payload.message.name);
},1000)
payload.success();
}
};
- Promise 方式
const actions = {
asyncUpdateUser(context, payload) {
return new Promise((resolve,reject) => {
setTimeout(()=>{
context.commit('updateUser', payload);
// 执行调用者的.then()
resolve('执行完成')
},1000)
})
}
};
this.$store.dispatch('asyncUpdateUser','携带信息')
.then(res => {
console.log(res);
})
浏览器刷新 Vuex 数据消失
手动解决
问题描述
Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。但是有一个问题就是:vuex 的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。
解决方案
监听页面是否刷新,如果页面刷新了,将 state 对象存入到 sessionStorage 中。页面打开之后,判断 sessionStorage 中是否存在 state 对象,如果存在,则说明页面是被刷新过的,将 sessionStorage 中存的数据取出来给 vuex 中的 state 赋值。如果不存在,说明是第一次打开,则取 vuex 中定义的 state 初始值。
修改代码
在 App.vue 中增加监听刷新事件
export default {
name: 'App',
mounted() {
window.addEventListener('unload', this.saveState);
},
methods: {
saveState() {
sessionStorage.setItem('state', JSON.stringify(this.$store.state));
}
}
}
修改 store/index.js 中的 state
const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
user: {
username: ''
}
};
使用vuex-persistedstate持久化插件
安装
npm install vuex-persistedstate
- 使用localStorage来固化数据(默认)
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
- 使用sessionStorage来固化数据
plugins: [
persistedState({ storage: window.sessionStorage })
]
- 使用cookie的情况
先安装npm install js-cookie
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
Vuex模块化
由于使用单一状态树(所有状态都存放在一个state对象中),应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
创建 user 模块
在 store 目录下创建一个名为 modules 的目录并创建一个名为 user.js 的文件,代码如下:
//创建一个user模块,模块下有vuex的四个属性
const User = {
state: sessionStorage.getItem('userState') ? JSON.parse(sessionStorage.getItem('userState')) : {
user: {
username: ''
}
},
getters: {
getUser(state) {
return state.user;
},
// 模块中 getters中的函数可以获取到根模块的state
getUser(state, getters, rootState) {
return state.user;
}
},
mutations: {
updateUser(state, user) {
state.user = user;
}
},
// 模块内的actions只能调用本模块的 mutations
actions: {
asyncUpdateUser(context, user) {
//对于模块内部的 action,局部状态通过 context.state 获取,根节点状态通过 context.rootState 获取. getters同理
context.commit('updateUser', user);
}
}
};
export default User;
默认情况下除了state其他三个属性的调用方式不变,不用指定使用哪个模块.
修改 store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import User from './modules/user'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
// 组件中使用this.$store.state.User.user获取到User模块的state状态的user属性
// modules中定义的模块对象最终会被加载到store的state中
User
}
});
命名空间
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的.
如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true
的方式使其成为带命名空间的模块。
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容(module assets)
state: () => ({ ... }), // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
}
}
}
})
Vuex推荐目录结构
── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── getters.js # 根级别的 getters
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
更多推荐
所有评论(0)