5分钟上手使用vuex，vuex状态管理，vuex遇到的坑_vuex混入遇到的坑(1)

本文链接：https://blog.youkuaiyun.com/2401_84447149/article/details/138919645

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

很多刚学习vue的人对于全局变量管理工具vuex都觉得很神秘，今天就用很通俗的大白话协助大家理解一下vuex，作者的vue项目使用vue脚手架搭建的，用脚手架搭建的项目会在src文件夹下有一个store文件，打开store文件，会看到里边有index.js，getters.js，actions.js这几个js文件（如果没有的话就自己建一下）。那么vuex的核心就在这几个文件当中，其实vuex最核心的就四部分：state（全局变量），mutations（修改全局变量的方法），actions（用于提交mutations的方法），getters（其他vue组件读取state变量的中间变量，作者理解，该处相当于导出了state）。接下来开始上代码进行分析。

store.js文件中代码该部分代码定义了全局变量state，并在mutations中定义了修改state的方法

   import Vue from 'vue'  // 首先导入vue
    import Vuex from 'vuex'  // 导入vuex
    import * as actions from './actions'  // 将actions方法导入
    import * as getters from './getters'  // 将getters导入
    
    Vue.use(Vuex)
    // 变量初始化
    const state = {
        count: 10
    }
    // 定义 mutations（即对变量state进行的操作）
    const mutations = {
        INCREMENT(state, canshu) {
            state.count++
        },
        DECREMENT(state) {
            state.count--
        }
    }
    
    // 创建 store 实例（先不着急看该部分代码，该部分就是将全局变量，mutations,actions,getters整体变成一体化的实例）
    export default new Vuex.Store({
        actions,
        getters,
        state,
        mutations
    })


actions.js中的代码
之所以用actions去提交mutations，应该是为了是的mutations中的方法可以异步操作（mutations中方法为同步执行，该处可能会迷惑，但是其实就是用actions中的方法去调用mutations中的方法而已）。

// 用于提交mutations中的INCREMENT方法（可根据自己的需要进行传参，对应的mutaitons中要接收参数）
export const increment = ({commit}) => {
    commit('INCREMENT', canshu)
}
// 用于提交mutations中的DECREMENT方法
export const decrement = ({commit}) => {
    commit('DECREMENT')
}

getters.js中的代码
一般getters中的代码比较简单，主要就将全局变量简单封装并导出，方便其他组件的调用。

// 该处将全局变量state下的count导出，是的其他vue组件都可以获取，进行修改
export const getCount = state => {
    return state.count
}

上面对vuex的几个组成部分进行了基本的了解，要使得整个项目使用vuex进行全局变量管理，要在main.js中引入vuex，并使用
在main.js中引入vuex（该部分引入在store.js添加也可）

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-rMzh6pRg-1715770669225)]