vuex学习总结

亦凉 2022-05-19 09:09 220阅读 0赞

嗯、vuex是有官网的：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]

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

## 使用Vuex： ##

（先再根目录下建一个文件夹store，再新建一个index.js文件）//当然这不是必然的，你也可以随便起别的名字，但推荐这样命名哈

*  安装vuex模块：npm install vuex --save
 *  作为插件使用： Vue.use(Vuex)
 *  定义容器：  new Vuex.Store() 
 *  注入根实例

## Vuex核心概念： ##

store:类容器，包含应用的大部分状态（可以理解为存储数据）

*  一个页面只能有一个store
 *  状态存储是响应式的
 *  不能直接改变store中的状态，唯一途径显式地提交mutations

State:包含所有应用级别状态的对象

Getters:在组件内部获取store中状态的函数

Mutations:唯一修改状态的事件回调函数

Actions:包含异步操作、提交mutation改变状态

Modules:将store分割成不同的模块

Vuex的辅助函数：mapState、mapMutations、mapActions、mapGetters

*  使用之前要先在组件中引入：import \{mapState,mapMutations,mapActions,mapGetters\} from 'vuex'    //实际应用时，用到哪个引入哪个即可，不用的可以不引入哦
 *  注意：这四个辅助函数的返回值都是对象

## Vuex应用举例： ##

### 1、store的使用： ###

let store = new Vuex.Store({
      state:{//存储状态（数据）
        count:100
      }
    })

vue组件中获得vuex状态：

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

在computed中：

法1：直接获取

computed:{
            num(){
              return this.$store.state.count
            }
    }

法2：使用vuex的辅助函数mapState

//方法1、
    computed:mapState({
           num:state=>state.count
    })
    //方法2、
    computed:mapState({
          num:'count'//直接写状态中的key值
    })
    //方法3、
    computed:mapState({
           num(state){
             return  state.count+=100
           }
    })
    //方法4、也可以为mapState中添加数组
     computed:mapState(['count'])
    //方法5、如果计算属性中有其他的值，那么就要用到扩展运算符了
         computed:{
           test(){
             return 123
           },
           ...mapState({//该函数的返回值是一个对象，所以需要将其扩展到computed这个对象中
             count:'count'
           })
         }

### 2、mutations的使用 ###

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

第二个参数，官方称之为mutation的载荷，即store.commit传入的额外的参数（大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读）

注意：mutation必须是同步函数，所有的异步操作都在我们下面要说的actions中执行

mutations:{
        addIncreate(state,payload){
          state.count +=payload.add
        }
      }

组件中应用：

法1、

methods:{
     addHandle(){
              //改变状态，提交mutation addIncreate
              this.$store.commit({
                type:"addIncreate",
                add:10
              })
             }
    }

法2、使用mapMutations（和mapState用法相似，下面不再一一举例）

methods:{
            ...mapMutations({
              addHandle:'addIncreate'
            })
    }

想要传递参数，不能直接加在addIncreate上面，要在事件上面传参，如下所示

### 3、Actions的使用： ###

Action类似于mutation，不同在于：

*  Action提交的是mutation，而不是直接变更状态
 *  Action可以包含异步操作

看个小示例：

actions:{
        addActivon(context){
          setTimeout(()=>{
            context.commit("addIncreate",{
              n:5
            })
          },1000)
        }
      }

Action函数接受一个与store示例具有相同方法和属性的context对象，所以我们可以通过context.commit提交一个mutation，实践中我们经常用到ES6中的对象解构赋值来简化的代码，所以也可以写为

actions:{
        addActivon({commit}){
          setTimeout(()=>{
            commit("addIncreate",{
              n:5
            })
          },1000)
        }
      }

组件中：

methods:{
      addHandle(){
              this.$store.dispatch('addActivon')
            }
    }

也可以使用辅助函数：mapActions:

methods:{
            ...mapActions({
              addHandle:'addActivon'
            })
    }

### 4、Getters的使用： ###

如果我们想要从state中派生出一些状态，那么此时我们就可以用到Vuex中为哦我们提供的getter了

getters可以认为是store的计算属性，就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

getter接受state作为其第一参数：

let store = new Vuex.Store({
      state:{
        count:100
      },
      getters:{
        changeState(state){
         return state.count>=120?120:state.count
        }
    )}

在组件中使用也很简单：

computed:{
            num(){
              return this.$store.state.count
            },
            num2(){
              return this.$store.getters.changeState
            }
          }

同样的，我们也可以使用辅助函数：mapSetters

computed:{
           ...mapState({
             count:'count'
           }),
           ...mapGetters({
             num2:'changeState'
           })
    
         }

Module：将store分割成不同的模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿，和难以分辨

为了解决这个问题，Vuex允许我们将store分割成模块。每个模块拥有自己的state、mutation、action……（和我们的选项对象拥有一样的属性）

看个简单的小示例：

let selectModule = {
    
      state:{
       //……
      },
      getters:{
       //……
      }, 
      mutations:{
       //……
      },
      actions:{
       //……  
      }
    
    }
    
    
    var store =  new  Vuex.Store({
      state:{
       //……
      },
      getters:{
       //……
      }, 
      mutations:{
       //……
      },
      actions:{
       //……  
      },
      module:{
         selectModule //此处可以写为key:value的形式，key就是模块名，如果key和value一样，就可以简写为我们的样式 
      }
    
    
    })

组件中使用也很简单，只需要加上我们的模块名即可，比如：

computed:{
            num(){
              return this.$store.state.selectModule.count
            }
    }

ok，姑且整理到这里，如果想要了解更多，建议看官网哦：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]

[https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/