29.VueX的简单使用

VueX的简单使用

首先，我们定义一个文件夹store（一般默认vuex的文件夹名），然后新建一个index.js的文件

import Vue from "vue";
import VueX from "vuex";

Vue.use(VueX);

const store = new VueX.Store({
    state: {
        count: 1000
    },
    mutations: {
        add(state) {
            state.count++
        },
        jian(state) {
            state.count--
        }
    },
    actions: {

    },
    getters: {

    },
    modules: {

    }
})

export default store

mutations里面的方法，好比是定义的事件，我们需要通过commit才能触发执行。

然后，我们在app.vue文件中通过定义事件，来触发mutations中的两个方法

<template>
  <div id="app">
    <h2>{{count}}</h2>
    <button @click="add">+</button>
    <button @click="jian">-</button>

    <Home></Home>
  </div>
</template>

<script>
import Home from "./components/Home"
export default {
  name: 'App',
  
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    add() {
      this.$store.commit('add')
    },
    jian() {
      this.$store.commit('jian')
    }
  },
  components: {
    Home
  }
}
</script>

<style>

</style>

我们需要通过this.$store.commit('注册事件')，来修改state中的属性