关于vuex的知识点

前言：

写在前面的话

为了我们更好的能够了解，什么是vuex怎么快速上手所以我们应该先明白我们要从他的那些方面入手如下

-  1、什么是vuex？
-  2、vuex能够帮助我们解决什么问题？
-  3、如何使用vuex？
-  4、vuex的五大核心？

1、什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。他使数据流通更加方便快捷，避免了很多冗余的业务逻辑，不用在组件中重复的去定义。一般在开发中大型项目的时候会用到vuex，小型项目开发用起来会有些麻烦。

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

vuex能够帮助我们解决组件之间数据传递或者共享的问题

3、vuex的理解

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

4、如何使用vuex?

4.1安装vuex

cnpm install vuex -save

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

4.3store文件夹内创建index.js

4.4index.js文件夹内引入vue与vuex

   import Vue from "vue"
   import Vuex from "vuex" 

4.5注册vuex

   Vue.use(vuex);

4.6对vuex进行实例化

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

4.7导出vuex

      export default store

4.8导出在main.js文件中引入store文件夹内的index.js文件

       import store from "./store" 

4.9将store配置到vue实例中

    new Vue({
            router,
            store,
            render: h => h(App)
        })

index.js中的总体效果

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js中的总体效果

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

5、Vuex的核心

vuex有五个核心概念:
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

5.1state的作用

state：保存初始化的一些状态(数据）

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

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

5.2mutations的作用

mutations：定义改变state状态的方法

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

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

5.3actions的作用

actions：在actions 中在通过context方法提交到mutation中，触发在mutations里面定义的方法。在action中可以进行一系列的异步操作，比如所axios请求等。

异步操作： 当一个程序没有执行完成,并不影响下面程序的执行,这个时候我们把它称之为异步操作( 定时器、promise、 async await)

同步操作： 当一个程序没有执行完成的时候,下面的程序不能执行,当上面的程序执行结束,下面的程序才可以执行 (for循环、函数、可通过promise对象进行异步操作)

在组件中如何调用actions内定义的方法：

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

5.3getters的作用

getters： 相当于是vuex的计算属性，他的返回值会被缓存起来，当依赖的值发生变化的时候会被重新计算。

在组件中如何调用getters内定义的方法：
getters中返回的值在组件中尽量使用computed方法接收一下，不然有可能会出现修改不会同步的情况。

5.4modules的作用

modules: 就是模块的意思，它将store分割成诸多个模块，每个模块都有完整的vuex的属性。它是为了避免在开发过程中业务逻辑
全部在同一个store中定义，出现一个巨型store，违背了vuex的初衷。 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter 等

例：

const moduleA = {
  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 的状态

modules命名空间的处理：

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: () => ({ ... }),
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 进一步嵌套命名空间
        posts: {
          namespaced: true,

          state: () => ({ ... }),
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

5.5plugins的作用

plugins：一个数组，包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数，可以监听 mutation（用于外部地数据持久化、记录或调试）或者提交 mutation （用于内部数据，例如 websocket 或 某些观察者）

6、Vuex的辅助函数

通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。

6.1如何使用辅助函数

例如：

引入需要使用的辅助函数
import {mapMutations} from 'vuex'
export default {
    methods:{
    //扩展
        ...mapMutations('子模块名字',{"属性":"方法名"}),
        Add(){
                this.属性名('更改的字段')
  
        }
    }
}

end

总结：写了那么多大家还有可能比较迷糊不知道怎么写，来吧、展示上案例.
Test.vue这是一个展示组件
Test

<template>
<div>
    <div>{{$store.state.n}}</div>
    <button @click="Add">111</button>
</div>
</template>

<script>

export default {
    methods:{
    
        Add(){
                 this.$store.commit('Add',10) //保留
                        
        }
    }
}
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
  n:20
  },
  mutations: {
   Add(state,value){
        state.n+=value
        }
  },
  actions: {
  },
  modules: {
  }
})

通过点击按钮数字会增加数字，然后这个案例就到此结束啦，我们下一章再见呦~