本文介绍Vue应用中使用Vuex进行状态管理的最佳实践，包括多模块配置、变量及方法使用等，并对比Vuex与localStorage、sessionStorage和cookie的区别。
文章目录
最佳实践：Vuex 多module 实践
你已经配置好了基础配置
子 module
store/modules/navIsCollapse.js
export default{
//开启命名空间
namespaced: true,
state: {
isCollapse: false
},
mutations:{
changeIsCollapse(state){
state.isCollapse = !state.isCollapse;
}
}
}
主 module
store/index.js
//import Vue from "vue";
//import Vuex from "vuex";
//const demoModule = require('./modules/demoModule')
//import demoModule from "./modules/demoModule"
import navIsCollapse from "./modules/navIsCollapse.js"
Vue.use(Vuex);
export default new Vuex.Store({
/* 多 modules 模式*/
modules: {
//demoModule: demoModule,
navIsCollapse,
},
state: () => ({
accessToken: '',
userInfo:{
userName: ''
}
}),
//mutations 用来 变更 store 中的信息,同步
//在<script>中调用 this.$store.commit("setToken","修改下token")
mutations: {
setAccessToken(state, access_token) {
// 这里的 `state` 对象是模块的局部状态
this.state.accessToken = access_token
},
setUserName(state,user_name){
this.state.userInfo.userName = user_name;
},
initAccessToken(state) {
this.state.accessToken = window.localStorage.getItem("access_token");
},
initUserInfo(state){
this.state.userInfo.userName = window.localStorage.getItem("user_name");
}
},
// store 的计算属性
//在<template>用于展示 {{this.$store.getters.gettersNumber}}
getters: {
gettersNumber(state) {
return state.number * 2;
}
},
// 异步执行 mutations 中方法
// 在<script>中调用 this.$store.dispatch("actionsSetNumber")
actions: {
//第一种写法，借助context
actionsSetToken(context, str) {
context.commit("setToken", str)
},
//第二种写法,简化
actionsSetNumber({
commit
}) {
commit("setNumber2");
}
}
});
使用
使用变量
- 引入 js
import {
mapState
} from "vuex"
export default {
computed: {
...mapState({
isCollapse: state => state.navIsCollapse.isCollapse
})
},
- 直接使用变量
:collapse="isCollapse"
使用方法
将数据变化的方法引入到 template 中的方法中
- 引入 js
import {
mapMutations
} from "vuex"
export default {
data() {
return {
isShow: true
}
},
methods: {
...mapMutations({
changeIsCollapse: "navIsCollapse/changeIsCollapse"
}),
changeNavBar() {//调用这个方法
this.isShow = !this.isShow;
this.changeIsCollapse();//引用 子 store 中的方法
}
}
}
- 通过 click 触发方法
<template>
<div class="header">
<el-button icon="el-icon-s-unfold" v-show="!isShow" @click="changeNavBar"></el-button>
<el-button icon="el-icon-s-fold" v-show="isShow" @click="changeNavBar"></el-button>
</div>
</template>
1、安装版本
Vue2 安装 Vuex:
npm i vuex@3
2、官方说明
2.1、Vuex 的核心 store 概念
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
3、安装
//如果你的vue版本是 2.X ，将vuex升到 3.X.X 就能够解决
npm i vuex@3
//如果你的vue版本是 3.X ，将vuex升到 4.X.X 就能够解决
//npm install --save vue@3.0.2
npm install --save vuex@4.0.0`
4、简单用法
4.1、基础语法
4.1.1、store对象声明、state、mutations、getters、actions
5、Vuex 和 localstorage、sessionstorage或cookie 比较
5.1、Vuex store 信息浏览器刷新即失效-借助钩子函数 beforeCreate
在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。
那么我们如何保证响应能力呢？比如对于登陆登出，可以借助钩子函数来完成localStore 信息向 store 信息的同步。
export default {
mounted() {
console.log(`the component is now mounted.`)
},
//使用钩子来初始化登陆信息
beforeCreate() {
this.$store.commit("setMsgLogin");
},
}
5.2、localStorage 生命周期是永久
localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
5.3、sessionStorage 仅在当前会话下有效
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
5.4、cookie 在设置有效期内有效，有存储空间、个数限制
cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。
6、Vuex 多module 实践(初学者版)
6.1、文件结构
index.js 包含一个默认的state信息，demoModules.js 包含一个子state信息，index.js 引入 demoModules.js
/store/index.js
/store/modules/demoModules.js
6.1.1、demoModule.js
const demoModule = {
//开启命名空间
namespaced: true,
state: () => ({
token: '',
number: 1,
number2: 1,
msg: '请登陆',
userInfo: {
userName: 'bestcxx'
}
}),
//mutations 用来 变更 store 中的信息,同步
//在<script>中调用 this.$store.commit("setToken","修改下token")
mutations: {
setToken(state, str) {
// 这里的 `state` 对象是模块的局部状态
state.token = str
},
setNumber(state) {
state.number = state.number * 2;
},
setNumber2(state) {
state.number2 = state.number2 * 2;
},
setMsgLogin(state) {
this.state.msg = "bestcxx 已登陆";
localStorage.setItem("msg", "bestcxx 已登陆");
}
},
// store 的计算属性
//在<template>用于展示 {{this.$store.getters.gettersNumber}}
getters: {
gettersNumber(state) {
return state.number * 2;
}
},
// 异步执行 mutations 中方法
// 在<script>中调用 this.$store.dispatch("actionsSetNumber")
actions: {
//第一种写法，借助context
actionsSetToken(context, str) {
context.commit("setToken", str)
},
//第二种写法,简化
actionsSetNumber({
commit
}) {
commit("setNumber2");
}
}
}
export default demoModule
6.1.2、/store/index.js
//import Vue from "vue";
//import Vuex from "vuex";
//const demoModule = require('./modules/demoModule')
import demoModule from "./modules/demoModule"
Vue.use(Vuex);
export default new Vuex.Store({
/* 多 modules 模式*/
modules: {
demoModule: demoModule
},
state: () => ({
token: '',
number: 1,
number2: 1,
msg: '请登陆',
userInfo: {
userName: 'bestcxx'
}
}),
//mutations 用来 变更 store 中的信息,同步
//在<script>中调用 this.$store.commit("setToken","修改下token")
mutations: {
setToken(state, str) {
// 这里的 `state` 对象是模块的局部状态
state.token = str
},
setNumber(state) {
state.number = state.number * 2;
},
setNumber2(state) {
state.number2 = state.number2 * 2;
},
setMsgLogin(state) {
this.state.msg = "bestcxx 已登陆";
localStorage.setItem("msg", "bestcxx 已登陆");
}
},
// store 的计算属性
//在<template>用于展示 {{this.$store.getters.gettersNumber}}
getters: {
gettersNumber(state) {
return state.number * 2;
}
},
// 异步执行 mutations 中方法
// 在<script>中调用 this.$store.dispatch("actionsSetNumber")
actions: {
//第一种写法，借助context
actionsSetToken(context, str) {
context.commit("setToken", str)
},
//第二种写法,简化
actionsSetNumber({
commit
}) {
commit("setNumber2");
}
}
});
7、开启调试模式
Vue.config.devtools = true;
参考资料
1、 简单demo
2、监听用户退出
3、从概念到具体
4、localStory
5、Vuex module 数据操作
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
