vuex 是什么？ 以及它的基本使用

1.关与vuex

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

1.2.安装vuex   如果创建项目带vuex了，可以省略这一步

npm i vuex -s

在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js

1.3.使用

初始化store中的index.js的内容

 然后把store挂载到man.js实例上

 1.5.再组件中使用vuex

<template>

    <div id='app'>

        <h1>{{ $store.state.name }}</h1>

    </div>

</template>

或者再组件方式中使用

methods:{

    add(){
        
        console.log(this.$store.state.name)

    }

}

注意，请不要在此处更改state中的状态的值

二、VueX中的核心内容

在VueX对象中，其实不止有state,还有用来操作state中数据的方法集，以及当我们需要对state中的数据需要加工的方法集等等成员。

成员列表：

• state 存放状态
• mutations state成员操作
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理

2.1 VueX的工作流程

 

Vuex官网给出的流程图

首先，Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时，需要dispatch VueX中actions的方法，以保证数据的同步。可以说，action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作，那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。不建议在组件中直接对state中的成员进行操作。

最后被修改后的state成员会被渲染到组件的原位置当中去。