import{_ as s,c as i,o as a,aj as n}from"./chunks/framework.DNhrqZu5.js";const o=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","filePath":"guide/vue2/vuex.md","lastUpdated":1756280434000}'),p={name:"guide/vue2/vuex.md"},t=n(`

Vuex 状态管理

目录结构

bash

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js

main.js 引入

javascript

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
new Vue({
  el: "#app",
  router,
  store,
  render: (h) => h(App),
});

使用

html

<script>
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(["userName"]),
    },

    methods: {
      // Action 通过 store.dispatch 方法触发
      doDispatch() {
        this.$store.dispatch(
          "setUserName",
          "真乖，赶紧关注公众号，组织都在等你~"
        );
      },
    },
  };
</script>

`,7),h=[t];function l(k,e,E,r,d,g){return a(),i("div",null,h)}const c=s(p,[["render",l]]);export{o as __pageData,c as default};

Vuex 状态管理 ​

Vuex 状态管理