vuex4.0使用

vuex4.0使用

1.新建modules跟index.js在store目录下
在modelue建我们需要操作的数据aside.js如：

//定义state,getter,mutions,actions
const state = {
  asideMenus: [
   
  ],
},
  getters = {
    asideMenus:state=>state.asideMenus
  },
  mutations = {
    SetAside: (state, menus) => { state.asideMenus = menus}
  },
  actions = {
    ActionsSideMenus:({ commit }, data) => {
      commit('SetAside',data)
    }
  }
export default {state,getters,mutations,actions}

在index.js引入

import { createStore } from 'vuex'
let files = require.context('./modules', false, /\.js$/);//获取到moduls下的所有文件

let modules = {};
files.keys().forEach(item => { //
  modules[item.replace(/\.\/|\.js/g, '')] = files(item).default;
});
// 把所有module下的state，mutions，getters，actions合并到一起,通过添加 namespaced: true 的方式使其成为带命名空间的模块。
Object.keys(modules).forEach(key => {
  modules[key]['namespaced'] = true
})

export default createStore({
  modules
})

在页面使用

<script setup>
import { onMounted, reactive, ref ,computed} from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const menus = computed(() => store.state.aside.asideMenus) //获取vuex数据
onMounted(() => {
  store.dispath('aside/ActionsSideMenus',[1,2,3,4,5,6]);
  console.log(store.state.aside.asideMenus)
})
</script>