vuex基本使用

109 阅读2分钟

什么是vuex

vuex是一个专门为vue.js所开发的状态管理模式。
他采用集中式存储管理所有的组件的状态,并以相应的规则保证状态以一种可预测的方式进行改变。 可以简单地将其理解为vue中创建了一个对象,里面包含了各种需要在各个组件间共享的变量。

vuex的基本使用

 1. 引入插件 
    Vue.use(Vuex)
 2. 创建对象
    const store= new Vuex.store({
      strict: true //一定使用mutation修改变量
      state:{  //保存数据的对象
      
      }
    })
 3. 导出对象
    export default store

vuex 改变变量

通过 this.$store.state来获取变量
vue官方建议通过mutation来修改vuex中的变量

vuex中的核心变量

1.state

用于存储vuex中的变量

2.getters

  该方法类似于vuex中的组件方法computed,可以对vuex中的属性进行计算
    使用方法:
      this.$store.getter.maxNum  //maxNm为定义在getter中的某个方法
      
     当想在getter中定义的函数传参数时,可以使用下述方法:
     
     eldestPeople(state){
       return function(age){
       // 在state中定义了一个students数组,这个方法用于将该数组中的年龄小于10的过滤掉
         return state.students.filter(s=>s.age>10)
       }
     }
      

3.mutation

当要传给mutation中的函数是有参数的时候:
  vue中的组件调用:
  addCount(count){
   this.$store.commit('incrementCount',count)
  }
  在vuex中还有其他的提交风格:
  addCount(count){
    this.$store.commit({
     type:'incrementCount',
     age,
     count=18
    })
  }
  在这种提交风格中,所传参数则变成了一个对象,需要在mutation中以(count.age方式取出),并且建议在mutation中
  以payload命名参数。
  在mutation中:
  incrementCount(state,count){
     state.counter+=count
  }
  当mutation想要进行响应式的布局时,前提是应该在store.state中定义好原有的变量,否则是不会有响应式的。
  当要新增变量或者删除变量并且使得二者是响应式的时候,我们可以使vue.set(state.info,key,value)或者
vue.delete(state.info.key)。
  当使用 delete state.info.age时,无法做到响应式。
mutation内函数应该为同步函数,当为异步函数时,devtools捕捉不到state中的改变。如果要在
mutation中使用异步函数,需要在action中使用。

4.action

action中的默认变量为context,与store中的state属性一样,可以通过context.commit来提供一个mutation,而在
action中使用$store.dispatch来分发action,即执行action中的函数,action中的函数一般就是用于提交mutation。
通常提交的mutation包含一个函数,定义在mutation中。

5.module

state中的定义的状态量变多时,我们可以将state中的变量划分为不同的模块,并且每个模块中也会有自己的
state,mutation,getter,actions等属性。

vuex中的单一状态树

当有多个状态时,系统管理会变得十分困难。