vuex

Posted 2020-11-28 fanqiuzhuji

　　?简介:
            公共的状态管理模式
            是一种最好的非父子组件传值的一种方案
            是一个插件

    ?安装：
            1、cnpm install vuex -S

　　

vueX配置文件

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);//使用插件


//vuex配置 公共的内存空间
const store = new Vuex.Store({
    state,//存放公共的状态（数据）
    actions,//处理异步数据
    mutations,//修改state中的数据    
    getters,//计算属性，当state中的数据发生改变时，会触发getters中的函数
    modules//多人协作，多个子模块，子模块导出时 namespaced:true 实现模块私有化
})

export default store;

    ?Vuex中常用的配置项：（5个）

        1、state:存储公共的状态
                当组件需要访问state中的数据的时候通过this.$store.state.属性进行访问

        2、actions:用来处理异步数据(当Vuex中的数据是通过异步获取的时候，必须要经历actions这个配置项)
                actions里面的每一个函数都会有一个参数这个参数是一个对象，对象中有一个commit方法
                这个方法用来触发mutations里面的方法

       3、mutations：用来修改state中的数据，state里面的数据只能在mutations这个配置项中修改
            mutations里面的每一个函数都会有一个参数这个参数就是state,用来修改state中的数据

       4、getters：计算属性(getters与组件中的computed很类似)
            getters中的函数依赖于state中的属性，当state中的属性发生了改变后就会触发getters里面的方法

       5、modules：多人协作的时候，防止变量和方法冲突
            modules里面的属性都是一个小型Vuex。Vuex里面有的配置项目子模块中也会有
            另外需要注意的是在导出子模块的时候切记加一个namespaced:true 实现Vuex模块私有化
            
            vuex模块化私有化：
                在子模块导出 export default{ } 中添加 namespaced:true

    　　6.?Vuex数据传递的流程：
                   当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。

                actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触                 mutations里面的方法进行数据的修改。

                mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数                据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

    ?   7.Vuex中的触发函数：
            dispatch： 触发actions里面的方法
                参数1：函数名称
                参数2：需要传递的参数

            commit :触发mutations里面的方法
                参数1：函数名称
                参数2：需要传递的参数
    

   8. ?辅助函数
         1、辅助函数
                mapState
                    1、引入mapState           import {mapState} from "vuex"
                    2、mapState必须将数据映射到computed身上
                    3、语法：
                        computed:mapState(["属性名称"])

                        computed:mapState({
                            key:state=>state.属性
                        })
        2、辅助函数
                mapActions
                    1、引入mapActions  import {mapActions} from "vuex"
                    2、mapActions必须将方法映射到methods身上
                    3、语法：
                        methods:mapActions(["方法名称"])

                        methods:mapActions({
                            key:方法名称
                        })
        3、 辅助函数
                mapMutations
                    1、引入mapMutations  import {mapMutations} from "vuex"
                    2、mapMutations必须将方法映射到methods身上
                    3、语法：
                        methods:mapMutations(["方法名称"])

                        methods:mapMutations({
                            key:方法名称
                        })
        4、 辅助函数
                mapGetters
                    1、引入mapGetters  import {mapGetters} from "vuex"
                    2、mapGetters必须将数据映射到computed身上
                    3、语法：
                        computed:mapGetters(["方法名称"])

                        computed:mapGetters({
                            key:方法名称
                        })
        
        5.结合...展开运算符使用
          computed:{
            ...mapState({
              n1:state=>state.a,
              n2:state=>state.b,
              n3:state=>state.c
            }),
            ...mapGetters({
              count:"count"
            })
          },
          methods:{
            ...mapActions({
              fn:"handleActions"
            }),
           ...mapMutations({
             handleAdd:"handleMutationsAdd"
           })
          }

 

 

 

实战：

index.vue

<template>
  <div class="app">
      <h2>{{n1}}</h2>
      <h2>{{n2}}</h2>
      <h2>{{n3}}</h2>
      <button @click="fn()">点击</button>
      <button @click="handleAdd()">点击++++</button>
      <h2>getters:{{count}}</h2>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations,mapGetters} from "vuex";
export default {
  name: "App",
 
  computed:{
    ...mapState({
      n1:state=>state.a,
      n2:state=>state.b,
      n3:state=>state.c
    }),
    ...mapGetters({
      count:"count"
    })
  },
  methods:{
    ...mapActions({
      fn:"handleActions"
    }),
   ...mapMutations({
     handleAdd:"handleMutationsAdd"
   })
  }
  
  
}
</script>

<style>

</style>

store/index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);


let state = {
    a:10,
    b:11,
    c:12
}


let actions = {
    handleActions({commit}){
        alert(1);
    }
}



let mutations = {
    handleMutationsAdd(state){
        state.a++;
    }
}


let getters = {
    count(state){
        return state.a+10
    }
}
// vuex配置项  公共的内存空间
const store = new Vuex.Store({
    state,
    actions,
    mutations,
    getters
})


export default store;