4.Vuex中的核心特性

• 4.Vuex中的核心特性
  • 1.State
  • 2.Mutation
  • 3.Action
  • 4.Getter
  • 5.modules

1.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

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

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

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

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

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

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

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

2.Mutation

Mutation用于修改变更$store中的数据

① 只能通过 mutation 变更 Store 数据, 不可以直接操作 Store 中的数据

② 通过这种方式虽然操作起来稍微繁琐一些, 但是可以集中监控所有数据的变化

使用方式： 打开store.js文件，在mutations中添加代码如下

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

然后在Addition.vue中给按钮添加事件代码如下：

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit('add',10)
  }
}

使用mutations的第二种方式：

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

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

methods:{
  ...mapMutations(['subN'])
}

如下：

子组件代码

<button @click="btnHandle">-N</button>

<script>
import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['subN']),
      //当点击按钮时触发Sub函数
      btnHandle(){
          //调用subN函数完成对数据的操作
          this.subN(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}
</script>

store.js

  // 只有mutations 中定义的函数, 才有权力修改 state 中的数据
  mutations: {
    add(state) {
      // 不要再 mutations 函数中, 执行异步操作
      // setTimeout(() => {
      //   state.count++
      // }, 1000)
      state.count++
    },
    subN(state, step) {
      state.count -= step
    }
  }

3.Action

在mutations中不能编写异步的代码，会导致vue调试器的显示出错。 如果通过异步操作变更数据, 必须通过Action, 而不能使用 Mutation, 但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据. 操作步骤如下： 打开store.js文件，修改Action，如下：

// 定义 Action
const store = new Vuex.store({
  // ...省略其他代码
  mutations: {
    add(state) {
      state.count++
    }
  },
  // 定义 Action
  actions: {
  	addAsync(context,step){
    	setTimeout(()=>{
      		context.commit('add',step);
    	},2000)
  	}
  }
})

然后在Addition.vue中给按钮添加事件代码如下：

<button @click="AddAsync">...+1</button>

// 触发 Action
methods:{
  AddAsync(){ 
    // 触发 actions 的第一种方式
    this.$store.dispatch('addAsync',5)
  }
}

第二种方式：

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

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

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

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

如下：

<button @click="btnHandle4">-N subAsync</button>

import { mapState,mapMutations,mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapActions映射的subNAsync函数
      ...mapActions(['subNAsync']),
      btnHandle4() {
         this.subNAsync(5)
      }
  },
  computed:{
      ...mapState(['count'])
  }
}

store.js:

// 定义 Action
const store = new Vuex.store({
  // ...省略其他代码
  mutations: {
    subN(state,step) {
      state.count -= step
    }
  },
  // 定义 Action
  actions: {
    subNAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    }
  }
})

4.Getter

Getter用于对Store中的数据进行加工处理形成新的数据 ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据, 类似Vue的计算属性

② Store 中数据发生变化, Getter 的数据也会跟着变化.

打开store.js文件，添加getters，如下：

// 定义Getter
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+ state.count;
    }
  }
})

然后打开Addition.vue中，添加插值表达式使用getters

<h3>{{this.$store.getters.showNum}}</h3>

或者也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性

<div>{{showNum}}</div>

import { mapGetters } from 'vuex'

computed:{
  ...mapGetters(['showNum'])
}

5.modules

当项目庞大，状态非常多时，可以采用模块化管理模式。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 的状态