学习笔记

• * ### vuex

Vuex

++ state ++ （用于存储全局数据）

• 组件访问 state 中的全局数据的方式1：

  this.$store.state.全局数据

• 组件访问 state 中的全局数据的方式2：

  // 组件中按需导入 mapState 函数
  import { mapState } from 'vuex'
  export default {
  name: 'app',
  computed: {
  // 将全局数据 映射 为计算属性
  …mapState(['inputValue'])
  },
  }

  {{ inputValue }}

---

++ mutations ++ （用于变更store存储的数据，不要在mutations中进行异步操作）

• 调用mutations的方式1：

  // 在store中定义
  mutations: {
  add(state,param1){
  state.count = param1
  }
  }
  // 在组件中调用
  this.$store.commit('add',param1)

• 调用mutations的方式2：

  import { mapMutations } from 'vuex'
  // 将指定的mutations函数，映射为组件的methods函数
  export default{
  methods: {
  …mapMutations(['add']),
  fun(){
  this.add()
  }
  }
  }

---

++ getters ++ （用于对Store中的数据加工处理形成新的数据）

• 定义 getters

  getters: {
  showNum: state => {
  return '当前最新的数据是: ' + state.count
  }
  }

• 使用 getters

  • 方式1：this.$store.getters.名称

  • 方式2：

  import { mapGetters } from 'vuex'
  export default {
  name: 'app',
  computed: {
  …mapGetters(['showNum'])
  }
  }

  {{ showNum }}

• getters 和 computed （都可以缓存计算结果）

  getters: {
  format(state){
  console.log("getters format 执行")
  return state.txt + " Vuex"
  }
  }

  {{ this.$store.getters.format }}

  {{ this.$store.getters.format }}

  {{ this.$store.getters.format }}

  {{ this.$store.getters.format }}

  {{ this.$store.getters.format }}

  computed: {
  format(){
  console.log("computed format 执行")
  return this.msg + " yeap!"
  }
  }

  {{ this.format }}

  {{ this.format }}

  {{ this.format }}

  {{ this.format }}

  {{ this.format }}

---

++ actions ++ （用于执行异步操作）

• 定义

  mutations: {
  add(state){
  state.count++
  }
  }
  actions: {
  addAsync(context){
  setTimeout(() => {
  context.commit('add')
  },1000)
  }
  }

• 触发

  • 方式1：this.$store.dispatch('addAsync')
  • 方式2：

  import { mapActions } from 'vuex'
  export default {
  name: 'app',
  methods: {
  …mapActions(['addAsync']),
  // this.addAsync()
  }
  }

  @click='addAsync'>

---