撰于 阅读 30

用vuex实现vue中的内容存储和组件数据共享

介绍与安装

介绍

Vuex 是 vue 项目中实现大范围数据共享的技术方案。作用：能够方便、高效地实现组件之间的数据共享。传统的父子组件数据传递较复杂，vuex可以更方便的实现多个交互组件之前的数据共享

安装

npm install vuex@next --save

使用步骤

定义

我们在src目录下新建store文件夹，创建index.js，和自己的模块js menu.js，这个例子中是为了实现左侧的导航菜单点击可在右侧头部展示当前菜单的tab页
index.js

import { createStore } from "vuex";
import menu from './menu'

export default createStore({
  modules: {
    menu
  }
})

这是为了创建store对象，方便外部使用需要去存储的变量，模块则是方便管理不同的变量类型

menu.js


const state = {
  isCollapse: false,
  selectMenu: []
}

const mutations = {
  collapseMenu (state) {
    state.isCollapse = !state.isCollapse
  },
  addMenu (state, payload) {
    // 对数据进行去重
    if (state.selectMenu.findIndex(item => item.path === payload.path) === -1) {
      state.selectMenu.push(payload)
    }
  },
  closeMenu (state, payload) {
    const index = state.selectMenu.findIndex(item => item.name === payload.name)
    state.selectMenu.splice(index, 1)
  }
}

export default {
  state,
  mutations
}

不可或缺的是state和mutations，一个用来定义存储的变量，一个定义更改这些变量的方法，最后需要将变量和方法对外暴露

在main.js中挂载store

import store from './store'
app.use(store)
app.mount('#app')

使用

在具体的组件和页面中先引入store并创建实例

import { useStore } from 'vuex'
const store = useStore()

在具体的执行处用commit调用定义的修改变量方法

<el-icon class="icon" v-if="!isCollapse" @click="store.commit('collapseMenu')" size="20">
  <Fold />
</el-icon>

如果有参数可在方法名后添加

const handleClick = (item, active) => {
  store.commit('addMenu', item.meta)
  router.push(item.meta.path)
}

变量的获取

变量的获取需要通过vue的计算属性去获得

import { computed } from 'vue'
const isCollapse = computed(() => store.state.menu.isCollapse)

store.state.模块.变量名

总结

Vuex 是 Vue.js 的状态管理库，通过集中式的存储管理应用的所有组件状态，实现了组件间数据的高效共享和一致性维护。它提供了一套清晰的 API，包括 state、getters、mutations 和 actions，使得状态管理更加直观和可控，从而提升了应用的可维护性和开发效率。

#vue#vuex