vueX 的用法（初学者）

最新推荐文章于 2025-11-18 19:01:02 发布

原创最新推荐文章于 2025-11-18 19:01:02 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Vue.js中使用的状态管理模式Vuex，详细解释了其五个核心概念：state、mutations、getters、actions和Module。通过实例展示了如何在实际项目中应用这些概念来管理应用程序的状态。

调用的五个基本核心概念

state

mutations

getters

actions

Module

第一个state 里面存储基本的变量状态信息

第二个mutations 存储修改的变量的信息

第三个 getters 获取存储的变量信息

第四个 actions 存储异步请求数据

第五个 Module 理解数据存储信息一个module 可以包含以上全部

<template>
  <Menu mode="horizontal" :theme="theme1" active-name="1">
    <MenuItem name="1">
      <Icon type="ios-paper"/>
      内容管理
    </MenuItem>
    <MenuItem name="2">
      <Icon type="ios-people"/>
      用户管理
    </MenuItem>
    <Submenu name="3">
      <template slot="title">
        <Icon type="ios-stats"/>
        统计分析
      </template>
      <MenuGroup title="使用">
        <MenuItem name="3-1">新增和启动{{ count }}</MenuItem>
        <MenuItem name="3-2">活跃分析</MenuItem>
        <MenuItem name="3-3">时段分析</MenuItem>
      </MenuGroup>
      <MenuGroup title="留存">
        <MenuItem name="3-4">用户留存</MenuItem>
        <MenuItem name="3-5">流失用户</MenuItem>
      </MenuGroup>
    </Submenu>
    <MenuItem name="4">
      <Icon type="ios-construct"/>
      综合设置
    </MenuItem>
  </Menu>
</template>
<script>

import playerModule from "../../model/playerModule";

export default {
  data() {
    return {
      count: '1',
      theme1: 'dark'
    }
  },
  mounted() {
    let player = this.$store;
    player.commit("playerModule/increment");
    console.log(player.getters["playerModule/doubleCount"]);
    player.dispatch("playerModule/increment")
    console.log(player.getters["playerModule/addCount"]);
    console.log(player.getters["playerModule/doubleCount"]);
  }



}
</script>

import Vue from 'vue'
import Vuex from 'vuex'
import {playerModule} from "../model/playerModule";


//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    },
    modules: {
        playerModule:playerModule,
    }


})

export default store