vue----webpack----对vuex的理解

一.vuex的理解

    Vuex是一种状态管理模式，它采用集中式存储管理应用的所有组件的状态。
    把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，任何组件都能获取状态或者触发行为，使代码更结构化，且易维护

    使用场景：中大型单页面开发

二.创建仓库

  每个Vuex的应用核心就是store(仓库)，包含着应用中大部分的状态（属性）
    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
   
　　 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation
 
    3.创建store仓库
                 //引入vue
                 import Vue from "vue";
               // 引入vuex
                 import Vuex from "vuex";
                //将vuex挂载在vue身上
                Vue.use(Vuex);
 
                //通过Vuex创建仓库,共有5个对象
                const store= new Vuex.Store({
                        state,
                        mutations,
                        actions，
                        getters,
                        module:{
                          
                            }
                })
                //导出仓库
                export default store

三.store的5个对象及作用

 

1.state:存放的是公共的状态

组件中访问公共状态的两种方式

    1.如果没有使用辅助函数-------this.$store.state.属性
    2.组件中使用了辅助函数mapState-------直接使用属性
 
（computed中使用）辅助函数----mapState

2.mutations: 用来修改state的状态(同步)

该对象下面所有的函数里面都会有2个参数 ，一个是state 另一是params

该方法触发的时候必须通过commit进行触发
 
（methods中使用）辅助函数-----mapMutations

3.actions:用来进行异步的请求(axios)和业务逻辑的操作

该对象下面所有的函数里面都会有2个参数
参数1：是一个对象 对象里面有commit和state
参数2：需要传递的参数

  commit里面的参数：
      参数1：mutations里面的方法名称
      参数2：需要传递的参数
 
调用actions里面的方法用两种方式
    1.未使用辅助函数--------通过dispatch--this.$store.dispatch("函数"，参数)
    2.使用辅助函数mapActions--------直接使用函数
 
（methods中使用）辅助函数-------mapActions
 

4.getters:当state里面的状态发生改变的时候getters里面的方法就会执行（eg:购物车）

getters其实就是一个计算属性
 
在getters里面的每一个函数中都可以访问到state
 
（computed中使用）辅助函数------mapGetters 

5.modules:将模块进行分类

modules里面存放的是一些子模块，store里面有哪些属性 子模块中也会有哪些属性

但是需要注意的一点是:  
1. 在导出子模块的时候需要加一个作用域的限制 namespaced=true

2.当访问子模块里面的一些方法或者状态的时候需要加上子模块的名字

例如
方法：
handleAdd:"tabStore/handleAdd";
状态：
message:state=>state.tabStore.message

详谈辅助函数

1.mapState()
　　将vuex中的state中的属性直接挂载到vue实例上，组件可以直接使用，同时，vuex中的state中的属性发生变化，组件中也会发生相应的变化
　　mapState 函数返回的是一个对象，使用对象展开运算符，将mapState返回的对象与computed的对象合并为一个，并直接挂载到vue实例上，
此时在组件中可以直接使用message,age属性

　　　为什么在computed中操作?

　　因为computed为计算属性，vuex的状态存储是响应式的，当 store中的状态发生变化时，相应的组件也会发生变化，compted可以计算属性，store中的状态发生变化，computed会 监听到，从而组件中也会发生相应的变化

computed:
...Vuex.mapState({
key:state=>state.key,
message:state=>state.message,
age:state=>state.age
})
 
 
23.mapActions()

　　将actions中的方法直接挂载到vue实例上，组件中可直接使用这些方法，并传参

　　(使用对象展开运算符，将mapActions返回的对象与methods合并，并挂载到vue实例上

methods:
...vuex.mapActions({
add:"handleAdd"
})
 
 
4.mapGetters()

　　getters:计算属性 相当于computed,当数据发生改变时，重新计算，否侧，从缓存中读取

    只要vuex中的state里面的数据发生改变那么getter里面的方法就会被执行，组件中使用getter中的方法时，不加括号

computed: 
...VuexmapGetters({
key:"key"
})

vuex数据传递的流程

 

 当组件进行数据修改的时候，
1.我们需要调用dispatch来触发actions里面的方法。(actions里面用来操作异步和业务逻辑)

2.actions里面的每个方法中,第一个参数是个对象{commit,state}，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。

3. mutations里面的每个函数都会有两个参数state，params，这样就可以在mutations里面进行state的数据修改 （mutations
数据的操作是同步的），

4.因为数据是双向绑定的，当数据修改完毕后，会响应给页面。页面的数据也会发生改变