Vue3中Vuex的基本使用

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex适用于中大型单页应用程序，可以方便地管理应用程序状态，实现状态共享和状态变更的响应式更新，使得代码更加清晰简洁。通常 Vuex 用于存储用户登录状态、用户个人信息、全局加载状态、页面公用数据等数据。

一、概念

  Vuex中有5个常用属性：state，mutations，getters，actions和modules

• State： 存储在Vuex中的数据（规则与vue实例中的data相同）。组件通过mapState辅助函数方便的将state生成为计算属性
• Getter： 基于State派生出的计算属性（可以理解为store的计算属性）。接收state为参数，返回对应的计算值。辅助函数mapGetters用于将getter映射到组件计算属性中
• Mutation： 这是更改store中的状态的唯一方法（同步函数 ）。类似于事件，在mutations中声明函数，通过store.commit(‘xxx’)调用。
• Action： Action可以包含任意异步操作，并在合适的时机提交mutation用于变更状态。在actions中声明函数，通过store.dispatch(‘xxx’)调用分发Action。辅助函数mapActions
• Module： 因为使用的是单一状态树，为了避免应用过大而臃肿，于是可以将store分割成模块（module)。每个模块拥有自己的state,mutation,action,getter、基于嵌套子模块。

二、基本配置

1、安装Vuex

npm install vuex

2、创建store

  应用不复杂时可以这样创建：

// 在scr目录下，创建store目录，新建index.js文件
import { createStore } from 'vuex'
import user from './modules/user.js'
import pay from './modules/pay.js'
import cat from './modules/cat.js'

export default const store = createStore({
	state: {
		couter: 0
		name: 'xiexie'
	},
	mutations: {
		// 定义的函数默认会将state传入
		// num为基本类型
		add: (state, num) => {
			state.couter+=num
		}
		// playload为对象类型
		changeName: (state, playload) => {
			state.name = playload.name
		}
	},
	getters: {
		// 默认传入state
		doubleCouter: (state) =>{
			return state.couter
		},
		// 也可以传入自身getters，对自身方法进行调用
		message: (state, getters) => {
			return 'name:$(state.name) pay couter:$(getters.doubleCouter)'
		}
	},
	actions: {
		// context为上下文对象（可以理解为store，里面也包含于五个相同的属性），num为参数
		add_action: (context, num) => {
			// 通过context去触发mutions中的add
			context.commit('add', num)
		}
	}
})

  当应用变得复杂时，state中管理的变量变多，store对象就有可能变得相当臃肿。为了解决这个问题，vuex允许我们将store分割成模块化（modules），一个模块代表一个功能合集。
   store目录下新建一个文件夹modules，该文件夹下又新建三个文件，分别为：user.js，pay.js和cat.js。

// scr/store/modules/user.js模块
export default {
	// 为每个模块添加一个前缀名，保证模块命明不冲突 
	namespaced: true, 
	state: () => {},
	mutations: {},
	getters: {},
	actions: {}
}

// scr/store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
  modules: {
    user,
    pay,
    cat
  }
})

3、全局引用

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './src/index.js'

createApp(App).use(store).mount('#app')

三、基本使用

<template>
	<div class='home'>
		
		<p>{{ couter }}p>
		<button @click='add(12)'>button>
		<button @click='asyncAdd(12)'>button>
		<p>message: {{ message }}p>
	div>
template>

<script setup>
	import { useStore } from 'vuex'
	import { toRefs } from 'vue'
	
	// 创建一个store实例
	const store = useStore()
	// 推荐使用该方式
	// 若直接解构则会失去响应式，toRefs是直接将变量链接到原数据
	const { couter } = toRefs(store.state)
	const add = (num) => {
		// store.commit(mutations中的函数名，需要传递的参数)
		store.commit('add', num)
	}
	const asyncAdd = (num) => {
		store.dispatch('add_action', num)
	}
	const { message } = toRefs(store.getters)
	// 参数带上模块名称
	const couter1 = toRef(store.user.cout)
script>

若有错误，请在评论区写出，或者想交流下学习心得也可在评论区留言。 请不要吝啬你的 **赞** 哟！！！