VueX核心概念与详细实例

骆骆爱学习

已于 2022-12-14 12:19:25 修改

阅读量234

点赞数 2

文章标签： vue.js javascript 前端

于 2022-12-14 12:16:24 首次发布

本文链接：https://blog.csdn.net/qq_34082921/article/details/128313314

版权

目录标题

一、什么是Vuex?
二、Vuex的五个核心概念
三、核心概念及实例详解
四、Vuex的状态管理图
五、项目结构

一、什么是Vuex?

Vuex是一个专为vue.js应用程序开发的状态管理模式。
当构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

二、Vuex的五个核心概念

State
Getters
Mutations
Actions
Modules

其中State和Mutations在任何项目都会接触到的核心概念。为什么说这两个是最核心的呢？

第一、首先State是唯一的数据源，也就是说需要把组件里面的一些状态提取出来放到State里面去，State是唯一的载体，我们必须要去定义我们的State，这是至关重要的。

第二、怎么去改变State里面的值呢？比如说如何去修改购物车里面的商品数量，我们在商品列表里面**+1**，在购物车列表里面把他删掉，它就要 -1,那么从哪去操作这个State，就通过Mutations,Mutations是唯一可以提交和改变状态的。因此这两个状态是我们必须要掌握的。

Getters、Actions、Modules，如果我们的项目不是太过于复杂，那么仅仅使用State和Mutations这两就可以满足业务需求了。

三、核心概念及实例详解

1. State

什么是State，前面提到过，每一个组件里面的data里面的变量都称之为State,State也是整个Vue整个核心的概念，这也就是告诉开发者，Vue是一个渐进式的框架，使用状态去管理和操作DOM，改变UI，不是使用过去的那种直接操作DOM的方式。所以说State是VUEX里面的一个核心的概念。
State是唯一的数据源，也就是它是唯一的载体，需要把任何一个需要抽取出来的变量，都要放到State里面去来进行管理，那么我们在任何一个页面都可以取到它。
单一的状态树，什么是单一的状态树，也是说通过定义一个store的实例，那么这个store实例里面只有一个State，单一的状态树，它不像Vue组件里面还可以嵌套另一个组件，另一个组件里面还可以嵌套N的组件，这样它是一个很有层级的关系的东西；
但是VUEX，其实很单一，它就是一棵树，这棵树这个store对象只要注册到main.js里面，只要被我们的vue注册之后，vue里面所有层级关系的组件都可以使用，它是比较单一的一颗状态树。

代码示例

下列代码组件，这是一个定时器的组件，他里面包括一个模板，可以看到模板里面用到count这么一个属性，可以看到它里面有个computed的计算属性，这个computed计算属性也就是说，当里面的变量发生变化了以后，它都会时时的进行计算，最后来渲染视图。
代码可以看到它里面定义了count这么一个函数，computed里面必须都是函数，在计算属性里面它每个字段对应的都是函数，模板里面的count对应就是computed里面的count方法；当模板里面的count发生变化的时候，computed里面的count就会时时计算，计算完了就渲染到模板对应的位置。

// 创建一个 Counter 组件 
const Counter = {
    template: `<div>{{ count }}</div>`,
    computed: { // 计算属性
        count() {
            return this.$store.state.count
            // this就是当前vue的实例，组件的实例； 
            //.$store表示vuex注册到vue里面，那么全局任何一个组件都可以拿到这个vuex; 
            //this.$store就是vuex的对象; 
            //只要通过import导入vuex; 
            // 然后通过vue.use我们的vuex， 
            // 我们就是可以通过this.store拿到我们的vuex的对象 
            // .state就是我们vuex里面定义的属性，它唯一的数据源 
            // 我们任何的状态都必须定义到我们的stort里面去 
            // count就是我们状态下挂的一个属性 
            // 我们就是使用这种方式去使用vuex里面的状态 
        }
    }
}

State是唯一的数据源，也就是说唯一的载体，只要通过import导入vuex;然后通过vue.use使用vuex，就是可以通过this.store拿到vuex的对象,.state就是vuex里面定义的属性，它唯一的数据源,任何的状态都必须定义到我们的stort里面去,count就是我们状态下挂的一个属性,就是使用这种方式去使用vuex里面的状态.

2. Getters

通过Getters可以派生出一些新的状态；

代码示例

new一个vuex的实例，这种方式就是定义vuex的实例，

const store = new Vuex.Store({ 
        state: {
         todos: [ { id: 1, text: '测试数据1', done: true }, 
         { id: 2, text: '测试数据2', done: false } ] }, 
         getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }
         
        } })
    // 我们这样创建了一个vuex的对象,这个对象里面包括state，我们可以把任何的状态抽取出来都放到state里面去， 
    // state是我们唯一的数据源,我们可以看到里面定义的数组,叫todos，加入这个todos是每个页面都要用到的数组 
    // 接下来还定义了getters,getters和state是平级的关系; 
    // 比如说现在又五个页面都使用到了这个数组,但是恰巧有一个页面它并不像完全应用这个数组, 
    // 它只想用done是true的数组列表; 
    // 我们可以通过getters对数组进行操作; 
    // 我们直接 return state.todos.filter(todo => todo.done);通过它的filter过滤器返回todo.done为true的数据 
    // getters是state的延伸，可以通过getters派生出一些新的状态 
    // getters是基于todos来操作的

再举一个例子，例如购物车的数量,大于99的时候，需要变成"99+"；这时候你仅仅定义一个state肯定是满足不了的；需要重新去延伸一个getters去做这样的一个操作。

3. Mutations

更改Vuex的store中的状态的唯一方法是提交mutation

代码示例

const store = new Vuex.Store({
    state: {
        // 我们在Store里面定义一个state这么一个属性 
        count: 1,
        // 它里面有个count这样的字段，值是1 }
        mutations: {
            increment(state) {
                state.count++
                // 变更状态 

                // 那么如何将count改成其他值呢,没有其他方法，必须通过mutations这个值 
                // 怎么提交,比方说，我们定义一个mutations这么一个属性，它里面一个increment的函数,这个函数可以随便起 
                // increment函数首先默认接收了一个状态；第一个参数就是state；这个state就是上面的state 
                // 它可以通过state。count去拿到我们的状态值;来去给它++；来改变它的状态 
                // 注意：只能在mutations里面去定义函数去提交改变state里面的值 
                // 这种方式有什么好处，它就相当于我们管理日志;管理我们的记录,在哪里怎么提交的，每一步都可以把它加到记录里面去；方便vuex的调试 

            }
        }
    }
})

mutations的功能
mutations里面只定义了函数，函数内部给值加1；但是需要有些地方去触发它
//那就是通过store.commit('increment') 去提交这个函数，这样我们的值才能去加1；
比防说在我们的购物车列表页面,当我们加入购物车以后我们只需要调一下store.commit去提交increment;接下来increment
就会把购物车的数量++；每个页面里面购物车数量都会++；这就是mutations的功能。

4. Actions

Action提交的是mutation,而不是直接变更状态

也就是说状态值需要通过mutation来提交;那么mutation它可以通过Action来提交;

Action可以包含冉义异步操作

代码示例

const store = new Vuex.Store({ 
// new了一个vuex的实例 
state: { count: 0 },
 // 定义了一个状态
mutations: { { state.count++ } }, 
 // mutations是唯一用来提交count值的 increment (state)
actions: { 
// actions也定义了increment;它默认接收一个context；context它可以直接去调用commit方法 
// 这都是vuex全局注册进来的 
// 通过context这个对象可以调用我们的commit来提交一个increment；
//这句话执行之后就会去调用mutation里面的increment方法,就会把count的值++； 
increment (context) { context.commit('increment') } 
} })

所以说第一种就是在methods里面直接调用store.commit('increment') 方法；第二种就是定义一个actions，通过这个actions来提交increment；

好像显得有点多余，确实有点多余；但是有一种场景它是不多余的；就是mutation的函数必须是同步的；而Action可以做任意异步的操作；

5. Modules

面对复杂的应用程序，当管理的状态比较多时；需要将vuex的store对象分割成模块(modules)。

代码示例

const moduleA = {
    // 通过const来定义一个moduleA,再定义一个moduleB；每个模块都包括 
    // stste,mutation,action,getters等一系列概念; 
    /*这些状态都是在A模块里面运用的；B模块里面也会应用到；
    但是如果项目并不需要太多的状态管理；那么完全可以把它定义到vuex里面去；
    不需要进行拆分； */
    // 只有在页面里面概念比较多，而又不想和别的页面进行混淆的时候； 
    // 可以把它拆分成每个模块 
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}
const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
}
const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } })
store.state.a
     // -> moduleA 的状态 store.state.b // -> moduleB 的状态

四、Vuex的状态管理图

在这里插入图片描述

五、项目结构

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块