1.安装vuex的依赖,npm install vuex -save
2.src新建目录与文件,如下,
index.js:
import { createStore } from 'vuex'
import getters from './getters';
import settings from './modules/settings';
const store = createStore({
modules: {
settings,
},
getters
})
export default store;
getters.js:
const getters = {
title: state => state.settings.title,
headerTitle: state => state.settings.headerTitle,
themeColor: state => state.settings.themeColor
};
export default getters;
settings.js
const state = {
/**
* @type {string}
* @description The project title
*/
title: '项目标题',
/**
* @type {string}
* @description The Header content
*/
headerTitle: '标题内容',
/**
* @type {string}
* @description theme color
*/
themeColor: '#409EFF',
};
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) {
state[key] = value;
}
}
};
const actions = {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data);
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
3.vue页面应用:a.获取全局变量,b.设置全局变量
<template>
<div>{{headerTitle}}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "index",
computed: {
...mapGetters(['headerTitle']) // 获取
},
data() {},
setup() {},
methods: {}
}
</script>
<template>
</template>
<script>
import $store from "@/store/index"; // vuex应用
export default {
name: 'App',
components: {},
watch: {
// 监视路由
$route(to, from) {
// 设置标题
$store.dispatch('settings/changeSetting', {
key: 'headerTitle', // state定义的全局变量
value: to.name // 设置默认值
})
}
}
}
</script>