Vuex模块化使用

vuex的5种状态

import { createStore } from 'vuex'
import aa from "@/store/modules/a"
export default createStore({
  //基本存储数据状态
  state: {
    count: 100
  },
  //计算状态
  getters: {
  },
  //同步方法
  mutations: {
    change(state, payload) {//state不用解释了，payload（荷载）即是在store.commit()中带入的参数 
      //第5步，在mutation里修改数据
      state.count = payload;
    }
  },
  //异步方法
  actions: {
    change(content) {
      //第3步，提交一个commit触发mutation
      content.commit('change')
    }
  },
  //模块化
  modules: {
    cmx: aa
  }
})

模块化

编写其他store文件

import { createStore } from "vuex"
const cmx = createStore({
    // namespace: true,
    state: {
        name: "陈晓明"
    },
    getters: {
    },
    mutations: {
        change(state, value) {//state不用解释了，payload（荷载）即是在store.commit()中带入的参数 
            //第5步，在mutation里修改数据
            state.name = value;
        }
    },
    actions: {
        change(content) {
            //第3步，提交一个commit触发mutation
            content.commit('change')
        }
    },

})



export default cmx;

引入起别名

页面使用

<template>
    <div>
        <h1>hello</h1>
    </div>
</template>

<script setup lang="ts">
//获取vuex里面的数据
import { useStore } from "vuex";
//拿到store独享
const store = useStore()
//获取cmx下面state
console.log(store.state.cmx.name)
</script>

<style scoped></style>