vuex及其五大核心

什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状
态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理工具”

主要用来解决多个组件共享状态

vuex能够帮助我们解决什么问题?

vuex是专门为Vue.js设计的状态管理库，进行高效的状态更新
能够帮助我们解决组件之间数据传递或者共享的问题

vuex的深入理解？

Vue 应用中的每个组件在 data() 中封装着自己数据属性，而这些 data 属性都是私有的，完全隔离的。
如果我们希望多个组件都能读取到同一状态数据属性，或者不同组件的行为需要更新同一状态数据属
性，
这就需要一个将共享的状态数据属性进行集中式的管理。
这就是 Vuex 状态管理所要解决的问题。

如何使用vuex?

VueX是在学习VueCli后进行的，所以在下文出现的项目的目录请参照VueCli 2.x构建的目录。

3.1 安装vuex
cnpm install vuex -save
或者：
npm i vuex -s

3.2 在src目录下创建store文件夹

3.3 在store文件夹内创建index.js文件

此时你的项目的src文件夹应当是这样的

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

3.4 在index.js 文件内引入 vue 和vuex

import Vue from "vue"  //引入vue实例
import Vuex from "vuex"  //引入vuex实例

3.5 挂载vuex
Vue.use(vuex);

3.6 对vuex进行实例化（也就是创建vuex对象）

const store = new Vuex({
    核心配置
})    

3.7 导出vuex

export default store

3.8 在main.js文件中引入store文件夹内的index.js文件
import store from “./store”

3.9 将store挂载到vue实例中

import store from './store'
new Vue({
    router,
    store,
    render: h => h(App)
})

vuex的核心

五大核心：state、mutation、getters、actions、modules

4.1 state的作用

state : 保存初始化的一些状态(数据)

4.1.2 在组件中如何获取state的状态

//全局:
    $store.state.定义的属性
//局部:        
    this.$store.state.定义的属性

4.2 mutations的作用
定义改变state状态的方法

4.2.1 在组件中如何调用mutations内定义的方法

//全局:
    $store.commit("方法名")
//局部:    
    this.$store.commit("方法名")    

4.3 actions的作用

4.3.1 通过actions里面定义的方法去触发在mutations里面定义的方法,并间接的改变state的状态

**4.3.2 在actions进行异步操作 **

什么是异步操作?
     当一个程序没有执行完成,并不影响下面程序的执行,这个时候我们把它称之为异步操作

如何将一个程序编程异步操作?
        1.定时器
        2.promise
        3.async await
什么是同步操作? 
    当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行
        1.for循环
        2.函数
        3.通过promise对象可以进行异步操作

4.3.3 在组件中如何调用actions里面定义的方法

全局:
    $store.dispatch("方法名",载荷) // 这里的载荷其实指的是要传递的参数
局部:     
    this.$store.dispatch("方法名",载荷)

4.4 modules的作用是什么

    由于使用`单一`状态树，应用的所有状态会集中到一个比较大的对象。
    当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
    为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）
    每个模块拥有自己的 state、mutation、action、getter 等

** 4.5 getters的作用是什么 **

vuex 中的getters 想当于vue中的computed ，getters是vuex 中的计算属性 ，计算属性写起来是方法，但它是个属性

** 4.5.1 getters 使用 **

在.vue文件里引入：import { mapGetters } from 'vuex'
在computed属性里：...mapGetters(['名字'])
之后直接在双花括号里写名字就可以使用了

什么情况下使用vuex

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。