vuex 基础使用

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: {
  }
})

至此完成！！！

测试有效！！！感谢支持！！！