vuex的几个主要核心概念:

  • State
  • Mutation
  • Action
  • Getter

1.State

state 提供唯一的公共数据源,所有共享的数据都要统一放到Store的state中进行存储。

//创建store数据源,提供唯一公共数据
const store = new Vuex.Store({
   state:{
     count : 0
     }
   })

组件访问state中数据的第一种方式:

this.$store.state.全局数据名称

组件访问state中数据的第二种方式:

//从Vuex中按需导入mapState函数
import {mapState} from 'vuex'

通过刚才导入的mapState函数,将当前组件所需要的全局数据映射为当前组件的computed计算属性:

//将全局数据映射为当前组件的计算属性
computed: {
...mapStatee(['count'])
}

Mutation

Mutation 用于变更Store中的数据
①只能通过Mutation变更Store的数据,不可以直接操作Store中的数据
②通过这种方式虽然操作起来有点繁琐,但是可以集中监控所有的数据变化

const store = new Vuex.Store({
   state: {
     count : 0
     },
     mutations: {
     add(state) {
      //变更状态
       state.count++
      }
     }
   })

触发mutation的第一种方式:

//触发mutation
methods:{
 demo1() {
  this.$store.commit('add') 
 }
}

可以在触发mutation时传递参数:

//定义mutation
const store = new Vuex.Store({
   state: {
     count : 0
     },
     mutations: {
     addN(state,step) {
      //变更状态
       state.count += step
      }
     }
   })
//触发mutation
methods:{
 demo2() {
  //在 调用commit函数
  //触发mutations函数时携带参数3
  this.$store.commit('addN',3) 
 }
}

this.$state.commit()是触发mutilations的第一种方式,触发mutations第二种方式:

//从Vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

通过刚才引入的mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法:

//将指定的mutations函数,映射为当前组件的methods函数
methods: {
...mapMutatiom(['add','addN'])
}


请不要在mutations函数中执行异步操作


Action

Action用于处理异步任务
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接
变更数据

const store = new Vuex.Store({
   state: {
     count : 0
     },
     mutations: {
     add(state) {
      //变更状态
       state.count++
      }
     },
    actions: {
    addAsync(context){
      setTimeout(() => {
   context.commit('add')
            },1000)
      }
     }
   })

触发Action的第一种方式:

//触发Action
methods: {
demo3(){
  this.$store.dispatch('addAsync')
 }
}

触发Action异步任务时携带参数:

const store = new Vuex.Store({
   state: {
     count : 0
     },
     mutations: {
     add(state) {
      //变更状态
       state.count++
      }
     },
    actions: {
    addNAsync(context,step){
      setTimeout(() => {
    context.commit('add',step)
            },1000)
      }
     }
   })
//触发Action
methods: {
demo3(){
//在调用dispatch函数,
//触发action时携带参数3
  this.$store.dispatch('addNAsync',3)
 }
}

this.$store.dispatch()是触发actions的第一种方式,触发action第二种方式:

//从Vuex中按需导入mapActions函数
import {mapActions} from 'vuex'

通过刚才引入的mapActions函数,将需要的actions函数,映射为当前组件的methods方法:

//将指定的actions函数,映射为当前组件的methods函数
methods: {
...mapActions(['addAsync','addNAsync'])
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据
①Getter可以对Store中已有的数据加工处理后形成新的数据,类似VUE的计算属性
②Store中数据发生变化,Getter数据也会跟着变化

//定义Getter
const store = new Vuex.Store({
   state: {
     count : 0
     },
     getters: {
   showNum: state => {
      return '当前最新的数据是【'+ state.count +'】'
      }
     }
   })

使用getters的第一种方式:

this.$store.getters.名称

使用getters的第二种方式:

//从Vuex中导入mapGetters函数
import mapGetters from 'vuex'
computed: {
 ...mapGetters(['showNum'])
}

还有一个Module

Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子
模块——从上至下进行同样方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a //moduleA 的状态
store.state.b //moduleB 的状态

关于模块这一块我现在的小项目还用不上,就没去深入了解了,详细内容参见:VUEX官方文档

Last modification:April 15th, 2020 at 05:48 pm
If you think my article is useful to you, please feel free to appreciate