vue3.0中vuex状态管理的安装及使用

---

文章目录 前言一、vuex是什么二、使用步骤1.安装2.全局挂载3.简单使用 总结

---

前言

提示：这里可以添加本文要记录的大概内容：

本文介绍了vue3.0中vuex的使用和快速入门

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex是什么

Vuex是一个专为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

二、使用步骤 1.安装

代码如下（示例）：

npm install vuex@next --save

2.全局挂载

在src目录下新建store文件夹下新建index.js文件代码如下

// vue3中创建store实例对象的方法createStore()按需引入
import { createStore } from 'vuex'
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  },
  modules: {
  }
})

在main.js文件中加上代码如下

import store from './store/index'
app.use(store)

3.简单使用

src/store/index.js

import { createStore } from 'vuex'
export default createStore({
  state: {
    info: 'hello'
  },
  mutations: {
    // 定义mutations，用于修改状态(同步)
    updateInfo (state, payload) {
      state.info = payload
    }
  },
  actions: {
    // 定义actions，用于修改状态(异步)
    // 2秒后更新状态
    updateInfo (context, payload) {
      setTimeout(() => {
        context.commit('updateInfo', payload)
      }, 2000)
    }
  },
  getters: {
    // 定义一个getters
    formatInfo (state) {
      return state.info + ' Tom'
    }
  },
  modules: {
  }
})

src/views/Test.vue测试组件中对store中数据的 *** 作与使用

<template>
  <div>测试组件</div>
  <hr>
  <!-- 页面中直接使用渲染时与vue2中的使用方法相同 -->
  <div>获取Store中的state、getters: {{$store.getters.formatInfo}}</div>
  <button @click='handleClick'>点击</button>
</template>

<script>
// 按需引入useStore()方法
import { useStore } from 'vuex'

export default {
  name: 'Test',
  setup () {
    // this.$store.state.info
    // Vue3中store类似于Vue2中this.$store
    // useStore()方法创建store对象，相当于src/store/index.js中的store实例对象
    const store = useStore()
    console.log(store.state.info) // hello
    // 修改info的值
    const handleClick = () => {
      // 触发mutations，用于同步修改state的信息
      // store.commit('updateInfo', 'nihao')
      // 触发actions，用于异步修改state的信息
      store.dispatch('updateInfo', 'hi')
    }
    return { handleClick }
  }
}
</script>

---

总结