vue3.x专题十 ---- vuex使用方法总结（全局状态）

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分模块的状态，觉得有用的朋友，可以点赞评论收藏一哈。。。