vuex的核心概念

Citrons

March 28, 2020

2473 views

No comments

4353 words

Vue

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官方文档