Vuex

Posted 2023-01-04 home-

哪里有梦，哪里有家，哪里有故事哪里有她，哪里能盛开复制的花

关于Vuex ( 最下方有代码 )

 

 

 

 

什么是Vuex、Vuex的概念

1、vuex是对数据的管理者。管理方式是对数据进行集中式管理。

 

2、可以解决VUE当中的传递繁琐的问题。通过VUEX来对数据进行传值。vuex可以对数据进行共享

（在任何组件当中使用其数据，并且某个组件数据发生变化，相对应的组件也会发生变化。也是双向绑定。）

 

3、在vuex中必须遵循单项数据流(保证组件不受影响)

 

4、最好的一种非父子传值的一种方案

 

5、vuex中存放了所有公用的状态

 

Vuex单向数据流操作

当组件需要修改state中的数据的时候必须通过dispatch来触发actions里面的方法，actions的每一个方法里面都会有一个

commit方法，用来触发mutations里面的方法,  mutations用来修改state中的数据。当mutations里面的方法触发的时候数据

 

就会发生改变，因为数据是响应式因此组件中的数据也会发生改变

一、

仓库中的数据在某个组件中使用:

因为仓库已经放到vue的实例中通过this是可以使用的,在组件中通过打印this查到里面的数据

渲染(在组件中渲染):this.$store.state.数据中的属性名

render把虚拟DOM渲染为真是DOM

 

二、

如何修改state中的数据:  (遵循单项数据流)

通过Dispath触发actions中的方法：(打印this查看详情)

actions:handleAdd()console.log("handleAdd触发了")

actions中的方法在使用的组件中如何调用:

this.$store.dispatch("actions中的方法名")  

 

三、  

在通过Commit触发Mutations中的方法，Commit在哪呢?

actions中的每一个方法都有一个合并后的对象

actions:handleAdd(...dest)console.log("handleAdd触发了",dest) Commit就在这里

这时dispatch可以传参了this.$store.dispatch("actions中的方法名",111)

通过commit触发Mutations中的方法：

Mutations:方法名()

在actions中的方法第一个参数解构出commit(对象的解构)

actions:handleAdd(commit,params)//用一个commit方法

    commit("Mutations中的方法名")

触发成功后可以修改数据了

Mutations中的方法也有两个参数1.state对象;2.commit方法中传递过来的参数

Mutations:方法名(state,params)

 

四、

Mutations:方法名(state,params)1.state对象中的数据；2.commit方法中传递过来的参数

    state.数据中得属性

    数据改变后组件中的数据也是发生改变的

 

 

 

Vue_vuex_辅助函数_mapState( 只能与computed用 )

state的辅助函数必须要在computed中使用

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

一、数组型

在computed计算属性中写：computed:Vuex.mapState(["数据中的属性名"])//这是computed的属性值

上方渲染区: 数据中的变量名

再也不用this.那些东西

 

二、对象型

可以改名字   数组改不了

在computed计算属性中写：computed:Vuex.mapState(属性名:"数据中的属性名")

上方渲染区: 对象中的属性名

 

三、函数型 (箭头函数,此方法只能在mapState中使用)

可以对数据渲染之前作二次更改 在函数中做做完在返回去

在computed计算属性中写：computed:Vuex.mapState(属性名:state=>state.数据中的属性名)

 

四、最终写法(解构型)(避免了写不了监听，可以继续向下操作)

computed:...Vuex.mapState(n : state=>state.n)

 

此函数执行完后会返回一个对象===对象做了个展开

 

Vue_vuex_辅助函数_mapActions

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

actions的辅助函数:没有必要再去声明一个函数

一、函数型

在methods中写: ...Vue.mapActions(["store.js中actions的函数名"]) 

上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数  

 

二、对象型

在methods中写: ...Vue.mapActions(属性名:"store.js中actions的函数名")

上方调用时只需调用属性名  

 

Vue_vuex_辅助函数_mapMutations

在渲染(当前)组件中引入vuex: import Vuex from "vuex";

Mutations的辅助函数:

直接触发Mutations中的方法:

在没有异步和业务逻辑的时候是可以直接调用Mutations中的方法的但是不能直接修改数据

也是在methods中使用：

一、函数型

在methods中写: ...Vue.Mutations(["store.js中Mutations的函数名"]) 

上方调用时只需调用中括号中的函数触发的是store中的函数不是组件中的函数  

 

二、对象型

在methods中写: ...Vue.mapMutations(属性名:"store.js中Mutations的函数名")

上方调用时只需调用属性名    

 

Vue_vuex_getters属性及辅助函数

在仓库中:

getters中的每一个函数都会有一个参数 这个参数是state    

getters:

    方法名(state)//必须要有返回值

        return state.操作

   

    

 

辅助函数:

在渲染(当前)组件中引入vuex: import Vuex from "vuex"

在computed中写:...Vuex.mapGetters(["方法名称"])

...Vue.mapGetters(属性名:"方法名称")    

 

代码

        actions
        用来处理异步 以及一些业务逻辑

        actions里面所以的函数都会有2个参数
        参数1 为一个对象 包含commit dispatch state
        参数2:是传递过来的参数

        actions里面的方法如果想要触发的时候必须通过dispatch

        辅助函数
        mapActions

          方案一：
            methods: 
                ...Vuex.mapActions(["handleAdd"])
              


          方案二：
               methods: 
                  ...Vuex.mapActions(
                      Add:"handleAdd"
                  )
              

    mutations
        用来做数据的增删改查   mutations里面的方法用来修改state中的数据

        mutations里面的所有函数都会有2个参数
          参数1：state
          参数2：传递过来的参数


        mutations里面的方法想要触发的时候必须通过commit



        辅助函数
        mapMutations
              methods: 
                ...Vuex.mapMutations(["handleMutationAdd"])
              


               methods: 
                ...Vuex.mapMutations(
                  handleMutationAdd:"handleMutationAdd"
                )
              




      getters:
          getters就相当于组件中的computed一样，也是可以进行数据的缓存
          主要的作用：监听state中数据的变化，当state中的数据发生改变的时候就会触发getters里面的方法


          getters中的每一个函数都会有一个参数 这个参数是state


          辅助函数
          mapGetters


          computed:
            ...Vuex.mapGetters(["方法名称"])
          

          computed:
            ...Vuex.mapGetters(
              key:"方法名称"
            )