一、vuex状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用==集中式==存储管理应用的所有组件的状态，并以相应的规则保证状态以一种==可预测==的方式发生变化
1.安装
在项目根目录下执行命令
npm i vuex --save
图示：
2.核心概念(模块)
(1)state
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源”而存在。
类似组件中的data，用来定义仓库中的初始数据
①初始化仓库并定义初始数据
/src/main.js
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex);
//初始化仓库
const store = new Vuex.Store({
state: {
msg: '纸上得来终觉浅',
}
})
new Vue({
el: '#app',
router,
// store:store,
store,
components: { App },
template: '<App/>'
})
②在任意页面组件中使用仓库中的数据
<p>仓库中的msg为:{{ $store.state.msg }}</p>
助手函数
mapState
<script>
import { mapState } from 'vuex'
export default {
computed:{
// ...mapState(['msg','num']),
...mapState({
str:state=>state.msg,
num:state=>state.num
}),
}
}
</script>
<template>
<div>
<p>{{ str }}</p>
</div>
</template>
(2)getters
有时候我们需要从 store 中的 state 中派生出一些状态
类似组件中的计算属性
①在仓库中定义计算属性
//初始化仓库
const store = new Vuex.Store({
// 定义初始数据
state: {
msg: '纸上得来终觉浅',
num:100
},
// 定义计算属性
getters:{
newnum(state){
return state.num + 10;
}
}
})
②在页面组件中使用计算属性的结果
<p>仓库中的newnum为：{{ $store.getters.newnum }}</p>
助手函数
mapGetters
import { mapGetters } from 'vuex'
export default {
computed:{
...mapGetters(['newnum'])
}
}
<template>
<div>
<p>{{ newnum }}</p>
</div>
</template>
(3)mutations
在仓库==唯一改变==state的方法
①在仓库中定义修改数据的方式，实现数据的可预测性变化
const store = new Vuex.Store({
...
mutations:{
changeNum(state){
state.num += 10;
}
}
})
接收额外的参数
mutations:{
changeNum(state,n=10){
state.num += n;
}
}
②在页面组件中通过commit直接调用仓库中定义好的方法
!-- 不传递参数 -->
<button @click="$store.commit('changeNum')">改变仓库中的num-mutations</button>
<!-- 传递额外的参数 -->
<button @click="$store.commit('changeNum',5)">改变仓库中的num-mutations</button>
助手函数
把仓库中定义好的方法当成页面组件中的方法直接使用
<script>
import { mapMutations } from 'vuex'
export default {
methods:{
// ...mapMutations(['changeNum'])
//改变仓库的mutations方法默认的名称
...mapMutations({
setnum:'changeNum'
})
}
}
</script>
<template>
<div>
<!--<button @click="changeNum()">改变仓库中的num-mutation</button>-->
<button @click="setnum()">改变仓库中的num-mutation</button>
</div>
</template>
(4)actions
Action 类似于 mutation，不同在于：
-
Action 提交的是 mutation，而==不是直接变更状态==。
-
Action 可以包含任意异步操作。
①在仓库中定义可以执行异步操作的方法
const store = new Vuex.Store({
...
mutations:{
changeMsg(state){
state.msg = '绝知此事要躬行'
}
},
// 定义可以执行异步操作的方法
actions:{
//context 上下文，是当前仓库本身
changeMsgSync(context){
//setTimeout(function(){
//提交mutation来实现数据的修改
context.commit('changeMsg')
//},3000)
}
}
})
②在页面组件中通过dispatch触发actions中的方法
<button @click="$store.dispatch('changeMsgSync')">改变仓库中的msg-action</button>
助手函数
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
methods:{
// ...mapMutations(['changeNum'])
...mapMutations({
setnum:'changeNum'
}),
...mapActions(['changeMsgSync'])
}
}
</script>
<template>
<div>
<button @click="changeMsgSync()">改变仓库中的num-actions</button>
</div>
</template>
(5)module模块
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得==非常复杂==时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
①在仓库中增加一个模块，比如back
modules:{
//模块名称：{}
back:{
namespaced:true,//启用命名空间
state:{
num:200
},
mutations:{
changeNum(state){
state.num+=10;
}
}
}
}
②在页面组件中使用back模块中的数据
<p>back模块中的num为：{{ $store.state.back.num }}</p>
③在页面组件中调用back模块中改变数据的方法
<button @click="$store.commit('back/changeNum')">改变back模块中的num</button>
3.数据持久化
(1)安装
npm i vuex-persistedstate
(2)使用
/src/store/index.js
import createPersistedState from "vuex-persistedstate";
export default new Vuex.Store({
state:{
userinfo:null
},
mutations:{
setUserInfo(state,data){
state.userinfo = data;
}
},
plugins:[createPersistedState()]
})
(3)sessionStorage保存数据
plugins:[createPersistedState({
storage:window.sessionStoreage
})]
二、ui库-element-ui
1.安装
npm i element-ui
2.引入
/src/main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';//一定要引入样式文件
Vue.use(ElementUI)