Vue Store用法大全

Vue Store架构从上述架构图可知，Vue组件通过调用dispatch()方法操作某个Action, 然后Action回操纵Mutation, 然后由Mutation操作State中的数据，而State中的数据改变之后，同时去改变Vue中的组件基本用法import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = n

Mary Ling

7823人浏览 · 2022-03-23 20:25:05

Mary Ling · 2022-03-23 20:25:05 发布

Vue Store架构

在这里插入图片描述
从上述架构图可知，Vue组件通过调用dispatch()方法操作某个Action, 然后Action回操纵Mutation, 然后由Mutation操作State中的数据，而State中的数据改变之后，同时去改变Vue中的组件

基本用法

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {  //用于存放数据
    count: 0
  },
  mutations: { //同步的更改数据
    mutateIncrementCount(state) {
      state.count++
    }
  },
  actions: {//可异步的更改数据
    incrementCount (context) {
      context.commit('incrementCount ')
    }
  }})

Action VS Mutation

对比	描述
Action	可以理解为公开给外部调用的方法（接口），我们通过Action去调用某个Mutation, Action不能直接去改变State中的数据
Mutation	用于操纵State中数据的值

外部操作State中数据方式

//最简单的分发
store.dispatch('incrementCount')

// 以载荷形式分发
store.dispatch('incrementCount', {amount: 10})

// 以对象形式分发
store.dispatch({
  type: 'incrementCount',
  amount: 10})

多模块管理

const module1 = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

const module2 = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

const store = new Vuex.Store({
    modules: {
        module1,
        module2
    }
})