Vuex使用

什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 可以帮助我们管理共享状态

可以理解为一个状态管理插件，可以存取能够共享的值，也可以解决不同组件之间的数据共享。

如果需要数据持久化，请点击Vuex数据持久化

---

1.打开Vue项目中的src文件夹下的store文件夹下的index.js文件

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    //存储的数据
    token: "",
  },
  mutations: {
    setToken(state, token) {
      //更改state存储的数据
      state.token = token;
    },
  },
  actions: {},
  modules: {},
});

2.打开Home.vue文件(实际上任何一个vue文件都可以)

<template>
  <div class="home">
    {{ this.$store.state.token }}
    <!-- 让vuex中的值显示在页面上 -->
    <el-button type="success" @click="existingValue">存值</el-button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {};
  },

  methods: {
    existingValue() {
      //使用store下的index.js文件下的mutations中的方法
      this.$store.commit("setToken", "token");
    },
  },
};
</script>

此时，项目运行后的页面为

因为未触发事件，所以vuex没有值（默认值我设置为了字符串的""）

点击按钮后，触发点击事件

此时，vuex中的存值就已经完成了。