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>