Vuex

Addition

• $store.state.count 专门用来调用 state
• $store.getters.showNum 专门用来调用getters
• dispatch 专门用来调用actions
• commit 专门用来调用mutations

Subtraction

• ...mapState 专门用来调用 state
• ...mapGetters 专门用来调用getters
• ...mapActions 专门用来调用actions
• ...mapMutations 专门用来调用mutations

vuex文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
})

页面展示

<template>
  <div class="home">
    <my-addition></my-addition>

    <p>----------------------------------------------------------------</p>

    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from '../components/Addition.vue'
import Subtraction from '../components/Subtraction.vue'

export default {
  name: 'Home',
  components: {
    'my-addition': Addition,
    'my-subtraction': Subtraction,
  },
}
</script>

// App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

访问全局数据

<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <button class="px-3 bg-pink-500 rounded">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style scoped></style>

访问全局数据

<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <button class="px-3 bg-yellow-500 rounded">-1</button>
  </div>
</template>

<script>
// 导入函数
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  // 计算属性
  computed: {
    // 调用函数mapState里放一个数组
    // 数组里面你要映射或者说你要使用哪个数据了，你就把需要使用的数据名称，放在这个数组中
    ...mapState(['count']),
  },
}
</script>

<style scoped></style>

用法多多

// Addition.vue
<template>
  <div>
    <h3>当前最新的count值为：{{ $store.state.count }}</h3>
    <button @click="btnHandler1" class="px-3 mx-2 bg-pink-500 rounded">+1</button>
    <button @click="btnHandler2" class="px-3 mx-2 bg-purple-500 rounded">+N</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      // 这种写法是错误了
      // this.$store.state.count++
      this.$store.commit('add')
    },
    btnHandler2() {
      // commit的作用,就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
  },
}
</script>

<style scoped></style>

Mutation函数用法

// vuex文件index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {},
  mutations: {
    add(state) {
      // 变更状态
      state.count++
    },
    // 第一个形参永久是自身state
    // 第二个是外界传过来了参数
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    },
  },
  actions: {},
  modules: {},
})

Mutation函数页面的使用

//Subtraction.vue
<template>
  <div>
    <h3>当前最新的count值为：{{ count }}</h3>
    <button @click="btnHandler1" class="px-3 mx-2 bg-yellow-500 rounded">-1</button>
    <button @click="btnHandler2" class="px-3 mx-2 bg-red-500 rounded">-N</button>
  </div>
</template>

<script>
// 导入函数
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  // 计算属性
  computed: {
    // 调用函数mapState里放一个数组
    // 数组里面你要映射或者说你要使用哪个数据了，你就把需要使用的数据名称，放在这个数组中
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    btnHandler1() {
      // 调用
      this.sub()
    },
    btnHandler2() {
      // 调用
      this.subN(3)
    },
  },
}
</script>

<style scoped></style>

完整代码

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0,
  },

  // Store中数据发生变化, Getter的数据也会跟着变化。
  // 首先大家要清楚一点，getters 只对咋们 state 数据起到一个包装的作用，他并不会修改 state 里面的如何数据
  // 哪我们认为 getters 就相当于 一个计算属性
  getters: {
    showNum(state) {
      return '当前最新的数量是 【' + state.count + '】'
    },
  },

  // 同步数据
  // 只有mutations 中定义的函数,才有权利修改 state 中的数据
  mutations: {
    add(state) {
      // 变更状态
      // 不要在mutations 函数中,执行异步操作
      //   setTimeout(() => {
      //     state.count++
      //   }, 2000)

      state.count++
    },
    // 第一个形参永久是自身state
    // 第二个是外界传过来了参数
    addN(state, step) {
      state.count += step
    },

    // 减法
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    },
  },

  // 异步数据
  actions: {
    // 大家注意： 在这里你能直接去访问咋们 state
    // 如果你要修改 state 里面的数据的话
    // 咋们需要 先去提交到 mutations 里面去才行哦！！！
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的数据
        // 必须通过 context.commit() 触发某个mutation 才行
        context.commit('add')
      }, 1000)
    },
    // 第一个形参永久是自身context
    // 第二个是外界传过来了参数
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },

    subAsync(context) {
      setTimeout(() => {
        context.commit('sub')
      }, 1000)
    },
    subAsync(context, step) {
      setTimeout(() => {
        context.commit('subN', step)
      }, 1000)
    },
  },
  modules: {},
})

• 组件代码1

// components/Addition.vue
<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ $store.state.count }}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="btnHandler1" class="px-3 mx-2 bg-pink-500 rounded">+1</button>
    <button @click="btnHandler2" class="px-3 mx-2 bg-purple-500 rounded">+N</button>
    <button @click="btnHandler3" class="px-3 mx-2 bg-fuchsia-500 rounded">+ Async</button>
    <button @click="btnHandler4" class="px-3 mx-2 bg-blue-500 rounded">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      // 这种写法是错误了
      // this.$store.state.count++
      this.$store.commit('add')
    },
    btnHandler2() {
      // commit的作用,就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    // 异步地让 count 自增 +1
    btnHandler3() {
      // 这里的 dispatch 函数，专门用来触发 action函数
      this.$store.dispatch('addAsync')
    },
    btnHandler4() {
      this.$store.dispatch('addNAsync', 5)
    },
  },
}
</script>

<style scoped></style>

组件代码2

// components/Subtraction.vue
<template>
  <div>
    <!-- <h3>当前最新的count值为：{{ count }}</h3> -->
    <!-- 正常写法 -->
    <!-- <button @click="btnHandler1" class="px-3 mx-2 bg-yellow-500 rounded">-1</button>
    <button @click="btnHandler2" class="px-3 mx-2 bg-red-500 rounded">-N</button>
    <button @click="btnHandler3" class="px-3 mx-2 bg-green-500 rounded">-1 Async</button> -->

    <!-- 简写法 -->
    <h3>{{ showNum }}</h3>
    <button @click="sub" class="px-3 mx-2 bg-yellow-500 rounded">-1</button>
    <button @click="subN(3)" class="px-3 mx-2 bg-red-500 rounded">-N</button>
    <button @click="subAsync" class="px-3 mx-2 bg-green-500 rounded">-1 Async</button>
    <button @click="subAsync(3)" class="px-3 mx-2 bg-violet-500 rounded">-1N Async</button>
  </div>
</template>

<script>
// 导入函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  // 计算属性
  computed: {
    // 调用函数mapState里放一个数组
    // 数组里面你要映射或者说你要使用哪个数据了，你就把需要使用的数据名称，放在这个数组中
    ...mapState(['count']),
    ...mapGetters(['showNum']),
  },
  methods: {
    // 调用函数
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subAsync']),
    // btnHandler1() {
    //   // 调用
    //   this.sub()
    // },
    // btnHandler2() {
    //   // 调用
    //   this.subN(3)
    // },
    // btnHandler3() {
    //   this.subAsync()
    // },
  },
}
</script>

<style scoped></style>