vue后台管理知识点、难点总结03
1 vuex应用
vuex;简单来说:对vue应用中多个组件的共享状态进行集中的管理(读/写)
有什么状态时需要我们在多个组件间共享呢?
比如用户的登录状态、用户名称、头像、地理位置等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保护管理,而且它们还是响应式的。
vuex就是将数据共享给多个组件共同使用,同时也将这个数据的状态进行了共享(一个组件改变这个数据的状态其它组件也跟着改变)。
vue官网对Vuex的解释:
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Actions要想添加状态并修改视图可使用Vue.set()/Vue.delete()或者
以新对象替换老对象。例如:state.obj = { …state.obj, newProp: 123 }
参考:https://blog.csdn.net/muzidigbig/article/details/83784037
在store/modules中新建home.js文件
import mockRequest from '@/utils/mockRequest'
const state={
list:{},
};
const mutations={
GETDATA(state,list){
state.list=list
}
};
const actions={
//发请求获取首页的mock数据
async getData({commit}){
let result=await mockRequest.get('/home/list')
if(result.code==20000){
commit('GETDATA',result.data)
}
}
};
const getters={};
export default{
state,
mutations,
actions,
getters,
}
在store 的 index中引入
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'
import home from './modules/home'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
home,
},
getters
})
export default store
组件中应用
import { mapState } from "vuex";
computed: {
//计算属性-标题
title() {
return this.activeName == "sale" ? "销售额" : "访问量";
},
//vuex
...mapState({
listState: (state) => {//可在vue浏览器开发工具查看state
return state.home.list;
},
}),
},
//监听属性
watch: {
title() {
//重新修改图表的配置数据
this.mycharts.setOption({
title: {
text: this.title + "趋势",
},
xAxis: {
data:
this.title == "销售额"
? this.listState.orderFullYearAxis
: this.listState.userFullYearAxis,
},
series: [
{
name: "Direct",
type: "bar",
barWidth: "60%",
data:
this.title == "销售额"
? this.listState.orderFullYear
: this.listState.userFullYear,
},
],
});
},
//刚加载完显示sale柱状图
listState() {
this.mycharts.setOption({
title: {
text: this.title + "趋势",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
data: this.listState.orderFullYearAxis,
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
axisLine: {
show: true, //y轴线出现
},
},
],
series: [
{
name: "Direct",
type: "bar",
barWidth: "60%",
data: this.listState.orderFullYear,
},
],
});
},
},