Vue3中vuex的使用

Vuex主要解决跨组件通信的问题。
在vue3中，需要使用Vuex v4.x版本。

安装

用npm或者yarn安装到项目中。

npm install vuex@next --save
# 或
yarn add vuex@next --save

使用

安装成功后，在src目录下创建store目录，再在store下创建index.js文件

//store/index.js
import {createStore} from 'vuex'
export default createStore({
	state:{},
	getters:{},
	mutations:{},
	actions:{},
	modules:{}
})

在store/index.js下输入以上内容。

• staet:数据仓库，用来存储数据的。
• getters:获取数据的，有点像computed的用法
• mutations：更改state数据的方法都要卸载mutations里
• actions：异步，异步的方法都写在这里，但最后还是需要通过mutations来修改state的数据。
• modules：分包。如果项目比较大，可以将业务拆散成独立模块，然后分文件管理和存放。

然后在src/main.js中引入

import {createApp} from 'vue'
import App from './App.vue'
import store from './store'
const app=createApp(App)
app.use('#app')

State

store/index.js

//store/index.js
import {createStore} from 'vuex'
export default createStore({
	state:{
		msg:'vuex'
	}
})

组件

//xxx.vue
<script setup>
import {useStore} from 'vuex'
const store=useStore()

console.log(store.state.msg)//vuex
</script>

Getter
getter方法跟computed是有点像的。
比如需要过滤一下数据，或者返回时组装一下数据，都可以用getter方法。
store/index.js

//store/index.js

import {createStore} from 'vuex'
export default createStore({
	state:{
		msg:'vuex'
	},
	getters:{
		getMsg(state){
			return state.msg+'你好！'
		}
	}
})

组件

//xxx.vue
<script setup>
import {useStore} from 'vuex'
const store=useStore()
console.log(store.getters.getMsg)//vuex你好！
</script>

Mutation
Mutation是修改state数据的唯一方法，这样Vuex才可以跟踪数据流向。
在组件中通过commit调用即可。

store/index.js

//store/index.js
import {createStore} from 'vuex'
export default createStore({
	state:{
		msg:'vuex'
	},
	mutaions:{
		changeMsg(state,data){
			state.msg=data
		}
	}
})

组件

// xxx.vue

<script setup>
import { useStore } from 'vuex'

const store = useStore()

store.commit('changeMsg', '蒜头')

console.log(store.state.msg) // 蒜头
</script>

Action
异步的写在action中，然后在组件中使用dispath方法调用

// store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    msg: '雷猴'
  },
  mutations: {
    changeMsg(state, data) {
      state.msg = data
    }
  },
  actions: {
    fetchMsg(context) {
      // 模拟ajax请求
      setTimeout(() => {
        context.commit('changeMsg', '鲨鱼辣椒')
      }, 1000)
    }
  }
})

组件

// xxx.vue

<script setup>
import { useStore } from 'vuex'

const store = useStore()

store.dispatch('fetchMsg')
</script>