vuex的基本使用（超级详细）

vuex在vue中起到一个数据状态共享的作用，类似于一个数据大仓库，接下来具体讲下vuex的使用方法。主要讲述如何定义数据，组件内如何获取数据，如何同步，异步更改数据

1、在src目录下新建store文件夹，在store文件夹下新建index.js文件

2、main.js引用

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3、index.js下代码如下：

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

export default new Vuex.Store({
  state: { //定义基础的数据
    flag: false,
    num: 10
  },
  mutations: { //同步修改state数据的方法
    //数字加5
    changeSum: (state, params) => { //params是传递过来的入参
      state.num = state.num + params
    },

    //是否展示图片
    showImg: (state) => {
      state.flag = !state.flag
    },

    //同步执行打印方法
    asyncFun() {
      console.log(888)
    }
  },
  actions: {
    asyncFun(context) {
      setTimeout(() => {
        context.commit("asyncFun"); //调用mutations内的同步方法
      }, 2000);
      console.log("我比asyncFun提前执行");
    }
  },
  modules: {

  }
})

4、组件内获取数据以及修改数据如下代码：

<template>
  <div class="box">
    <div>
      <button @click="tap">点击数字加5</button>
      结果:
      {{this.$store.state.num}}
    </div>

    <div>
      <button @click="showImg">点击展示图片</button>
      <img src="https://img.alicdn.com/imgextra/i3/114052057/O1CN015yyAY91R49P9C4vbl_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt="" v-if="this.$store.state.flag">
    </div>

    <div>
      <button @click="tapAsync">异步执行</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: 5,
    };
  },

  mounted() {},

  methods: {
    tap() {
      //直接触发mutations函数的方法，changeSum是mutations下的方法名，this.sum是入参
      this.$store.commit("changeSum", this.sum);
    },

    //点击展示下方图片
    showImg() {
      this.$store.commit("showImg");
    },

    //调用actions里的asyncFun方法，而后再调用mutations里的同步方法，实现异步操作
    tapAsync() {
      this.$store.dispatch("asyncFun");
    },
  },
};
</script>

<style scoped>
.box > div {
  margin: 30px 0;
}
img {
  width: 100px;
  height: 100px;
}
</style>