Vuex快速入门

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

核心概念

state，驱动应用的数据源；
mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)
actions，响应在 view 上的用户输入导致的状态变化。
Getter，store 的计算属性，

State

在 Vue 组件中获得 Vuex 状态

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>这是一个关于页面{{count}}</h1>
  </div>
</template>
<script>
export default {
  name: "commerceUser",
  data () {
    return {
      count: this.$store.state.count,
    }
  }
}
</script>

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState 辅助函数，通过将最终对象传给computed属性，帮助生成计算属性。

<template>
  <div class="about">
    <h1>这是一个关于页面{{count}}</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
  computed: {
    ...mapState(['count'])
  },
}
</script>

mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:2
  },
  mutations: {
    add (state)//add (state,step) {
        state.count++
    }
  },
  actions: {
  },
  modules: {
    
  },
   getters:{
    
   }
})

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
      bt(){
         this.$store.commit('add')
      }
  }
}
</script>

可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

<template>
  <div class="about">
    <h1>{{$store.state.count}}</h1>
    <button @click="bt">+1</button>
  </div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: "commerceUser",
      data () {
        return {}
      },
  methods:{
     ...mapMutations(['add']),
     bt(){
         this.add()
     }
  }
}
</script>

actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  },
  getters:{
        show(state){
            return '当前最新数据'+state.count
        }
    }
})

<template>
  <div class="about">
    <h1>这是一个关于页面{{this.$store.getters.show}}</h1>
  </div>
</template>

最后编辑于：2020.09.10 10:16:14