vue后台管理知识点、难点总结03(vuex)

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,
        },
      ],
    });
  
    },
  },