1、封装使用
在项目中的 Store 文件夹下创建 modules 文件夹 getters.js 和 index.js 然后如下：
modules 文件夹下创建 一个 index.js 文件 存放需要的功能方法
// 写一个简单的菜单切换，获取当前点击菜单的索引
const Index = {state: {menuIndex: 0,},actions: {},mutations: {onChange(state, value) {state.menuIndex= value;}}};export default Index ;在 getters.js 中引入 上边的js文件，如下：
const getters = {// 引入菜单切换的方法menuIndex: state => state.index.menuIndex,};
export default getters;
在 index.js 中引入使用
import { createStore } from 'vuex';
import aio from './modules/index';
import getters from './getters';const store = createStore({modules: {index,},getters,
});export default store;
点击菜单时更新存放的索引值：
methods: {onLeftMenu(index){this.$store.commit('onChange',index)},
},最后在其他地方引入使用最新的索引：
<template><div id="footer-menu"><div>{{ menuIndex }}</div></div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {data(){return{}},computed: {...mapGetters(['menuIndex']),},watch: {// 监听数据的变化(此处用于切换菜单获取索引)leftMenuIndex(newValue, oldValue) {console.log(newValue);}},
}
</script>2、非封装使用
在项目中的 Store 文件夹下创建 index.js 然后如下：
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {menuIndex: 0, // 菜单索引},getters: {},mutations: {onChange(state, value) {state.menuIndex= value;}},actions: {},modules: {}
})
至此完成！！！
测试有效！！！感谢支持！！！
