vuex 的使用

vuex 的简介

• vuex 是全局状态管理器，在 state 中定义一个全局变量，可以在任何一个组件中进行获取、修改，并且可以将修改的内容同步到全局

vuex 的安装

npm install vuex --save

vuex 的配置

• 项目中新建一个名为 store 的文件夹，用来存放所有配置文件或设置全局变量的文件

import { createStore } from 'vuex'

export default createStore({
  // 要设置的全局访问的state对象
  state: {
    count: 0
  },
  mutations: {
    // 进行数据更新，改变数据状态
    countType(state, action) {
      state.count = state.count + action.addNum
    }
  },
  actions: {
    // 执行动作，将数据发散到需要的位置
    addCount(context) {
      let action = {
        addNum: 20
      }
      context.commit('countType', action)
    }
  },
  getters: {
    // 获取到最终的数据结果
    getCount(state) {
      console.log('getters-store中获取到了state', state);
      return state.count
    }
  }
})

vuex 的全局注入

• 入口文件(一般为 main.js)中引入 store，然后全局注入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

vuex 的使用

• 改变全局 state 中的变量，这里用的是 vue3 的写法

<template>
  <div id="useVuex">
    <div class="autoMsg">{{ data.count }}</div>
    <div class="button">
      <el-button type="warning" plain @click="add"
        >触发vuex改变的事件</el-button
      >
    </div>
    <div class="result scroll"></div>
  </div>
</template>
<script>
import { reactive } from "vue";
import { useStore } from "vuex";
export default {
  nameL: "useVuex",
  setup() {
    let store = useStore();
    let data = reactive({
      count: 0,
    });

    let add = () => {
      // 点击的时候，主动去触发store的事件
      store.dispatch("addCount");
      // store中的事件改变全局的值，赋给count
      data.count = store.getters.getCount;
    };
    return {
      data,
      add,
    };
  },
};

• 获取全局变量，在另一个组件中获取

<template>
  <div id="transDef">
    <div class="autoMsg">{{ data.count }}</div>
    <div class="button"></div>
    <div class="result scroll"></div>
  </div>
</template>
<script>
import { reactive } from "vue";
import { useStore } from "vuex";
export default {
  nameL: "transDef",
  setup() {
    let store = useStore();
    let data = reactive({
      count: 0,
    });
    data.count = store.getters.getCount;
    return {
      data,
    };
  },
};
</script>