定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通V。
Vuex一般用于保存数据,让数据保持一致性。
下面就是Vuex的使用:
1:先安装
npm install vuex@next --save
yarn add vuex@next --save
2:配置
新建store文件->index.js,进行如下配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 数据
},
getters: {
// 获取数据
},
mutations: {
// 定义修改state的方法
},
actions: {
// 操作异步方法
},
modules: {}
})
3: 在组件中使用 (完整代码)
vue2的写法
<template>
<div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'meetingView',
computed: {
...mapState({
dim: state => state.meeting.dim
})
},
methods: {
toDay() {
// setDim 对应mutations定义的方法,date是对应的参数
this.$store.commit('setDim', 'date')
}
}
}
</script>
<style lang="scss" scoped></style>
vue3的写法
<template>
<div>
</div>
</template>
<script lang="ts">
import { mapState } from 'vuex'
setup(props, context) {
const store = useStore()
const dim = state.meeting.dim
return store.state.meeting.dim
}
const toWeek = () => {
store.commit('setDim', 'week')
}
return {
dim,
toWeek
}
}
</script>
<style lang="scss" scoped></style>
新建store文件->meeting.js(自定义),进行如下配置
export default {
state: {
dim: 'home'
},
mutations: {
setDim(state, val) {
state.dim = val
}
}
}
新建store文件->index.js,进行如下配置
import Vue from 'vue'
import Vuex from 'vuex'
import meeting from './meeting'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
meeting
}
})