1、创建vuex仓库  store/index.js

import { createStore } from 'vuex'
// 创建vuex仓库并导出
export default createStore({state: {// 数据username: '张三'},mutations: {// 改数据函数updateName (state) {state.username = “新名字”}},actions: {// 异步操作：请求数据函数updateName (context) {// 发请求setTimeout(() => {context.commit('updateName', '更改名字')}, 1000)}},modules: {},getters: {// vuex的计算属性newName (state) {return 'hello  ' + state.username}}
})

2、在组件中使用

<template><div>使用根模块state数据:{{ $store.state.username }}</div><div>使用根模块getters数据:{{ $store.getters.newName }}</div><br><div><button @click="mutationsFn">mutationsFn改名字</button></div><div><button @click="$store.commit('updateName', '李四')">mutationsFn改名字</button></div><br/><br/><div><button @click="actionsFn">actionsFn改名字</button></div><div><button @click="$store.dispatch('updateName')">actionsFn改名字</button></div>
</template><script>
import { useStore } from 'vuex'
export default {name: 'App',setup (props) {const store = useStore()const mutationsFn = () => {// 执行根目录里面的mutations方法修改数据store.commit('updateName', '李四')}const actionsFn = () => {// 执行根目录里面的mutations方法修改数据store.dispatch('updateName')}return {mutationsFn,actionsFn}}
}
</script>
<style lang="less"></style>

3、在单独的 js文件里面， 使用vuex

import { useStore } from 'vuex'
const store = useStore()
const mutationsFn = () => {// 执行根目录里面的mutations方法修改数据store.commit('updateName', '李四')
}
const actionsFn = () => {// 执行根目录里面的mutations方法修改数据store.dispatch('updateName')
}

这里做一下总结，下一节我们总结一下vuex分模块的状态，觉得有用的朋友，可以点赞评论收藏一哈。。。