vue3中vuex的使用

vuex主要用于解决跨组件通信的问题。

1.安装

npm i vuex

2.创建

安装成功后，在src目录下创建store目录，再在store下创建index.js文件。并引入以下内容。

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

• staet:数据仓库，用来存储数据的。

• getters:获取数据的，有点像computed的用法。

• mutations：更改state数据的方法都要写在mutations里，且是唯一方法。

• actions：异步，异步的方法都写在这里，但最后还是需要通过mutations来修改state的数据。

• modules：分包。如果项目比较大，可以将业务拆散成独立模块，然后分文件管理和存放。

3.main.js引入注册

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

4.使用

state获取

store/index.js中

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

组件

//xxx.vue

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

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

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