脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Store 用法

Vue 关于Store的用法小结

 更新时间：2024年08月29日 11:17:50   作者：Teln_小凯  
Vue Store是的状态管理模式和库,它提供了一种集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要介绍了Vue 关于Store的用法,需要的朋友可以参考下

Store就是全局变量都是可以双向绑定的，以下是模块的用法：

state定义的是变量名称，mutations里面是给变量赋值的方法

export default {
    namespaced: true,
    state: {
        //打开的Tabs
        tabs: null,
        //当前显示的key
        selectTabKey: null
    },
    mutations: {
        setSelectTabKey(state, key) {
            state.selectTabKey = key;
            localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));
        },
        setTabs(state, tabs) {
            state.tabs = tabs;
            localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(tabs));
        },
        initTabs(state, tab) {
            var localTabs = localStorage.getItem(process.env.ADMIN_TABS_KEY)
            if (localTabs != null) {
                state.tabs = JSON.parse(localTabs);
                state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));
            } else {
                state.selectTabKey = tab.key;
                localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(state.selectTabKey));
                state.tabs = [];
                state.tabs.push({
                    title: tab.title,
                    icon: tab.icon,
                    content: "",
                    key: tab.key,
                    closable: false,
                    icon_bk: "",
                    url: tab.url,
                });
                localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(state.tabs));
            }
        },
        addTabs(state, tab) {
            state.selectTabKey = tab.key;
            localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(state.selectTabKey));
            var localTabs = localStorage.getItem(process.env.ADMIN_TABS_KEY)
            if (localTabs != null) {
                state.tabs = JSON.parse(localTabs);
            }
            if (state.tabs == null) {
                state.tabs = [];
            }
            //判断有没有在tabs里面
            var isAdd = false;
            for (var pn of state.tabs) {
                if (pn.key == tab.key) {
                    isAdd = true;
                    break;
                }
            }
            if (isAdd == false) {
                state.tabs.push({
                    title: tab.title,
                    icon: tab.icon,
                    content: "",
                    key: tab.key,
                    closable: true,
                    icon_bk: "",
                    url: tab.url,
                });
            }
            localStorage.setItem(process.env.ADMIN_TABS_KEY, JSON.stringify(state.tabs));
        },
    }
}

然后整合模块

import menu from './menu'
import tab from './tab'
import setting from './setting'
export default {menu, tab,setting}

 对外输出

import Vue from 'vue'
import 'es6-promise/auto'
import Vuex from 'vuex'
import modules from './modules'
Vue.use(Vuex)
const store = new Vuex.Store({modules})
export default store

 Main方法注册

 获取

this.$store.state.tab.selectTabKey

赋值

this.$store.commit("tab/setSelectTabKey", targetKey);

 监控值改变

watch: {
    "$store.state.tab.selectTabKey": {
      handler: function (newVal, oldVal) {
        if (this.currTarger != newVal) {
          this.onTabChange(newVal);
        }
      },
    },
  },

可以直接绑定

注意点，全局变量存localstore的时候必须转JSONString，取的时候也得转，否则 绑定到控件上会失效

存

localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, JSON.stringify(key));

 取

state.selectTabKey = JSON.parse(localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY));

之前直接这样写会导致无法绑定到控件

localStorage.setItem(process.env.ADMIN_TABS_SELECT_KEY, key);

state.selectTabKey = localStorage.getItem(process.env.ADMIN_TABS_SELECT_KEY);

到此这篇关于Vue 关于Store的用法的文章就介绍到这了,更多相关Vue Store 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • antd upload上传组件如何获取服务端返回数据

    antd upload上传组件如何获取服务端返回数据

    这篇文章主要介绍了antd upload上传组件如何获取服务端返回数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • vue如何通过插槽组件之间数据传递

    vue如何通过插槽组件之间数据传递

    这篇文章主要介绍了vue如何通过插槽组件之间数据传递问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • vue-cli3脚手架的配置及使用教程

    vue-cli3脚手架的配置及使用教程

    这Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。篇文章主要介绍了vue-cli3脚手架的配置以及使用,需要的朋友可以参考下
    2018-08-08
  • vue2和elementUI 实现落日余晖登录页和滑块校验功能

    vue2和elementUI 实现落日余晖登录页和滑块校验功能

    这篇文章主要介绍了vue2和elementUI打造落日余晖登录页和滑块校验,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-06-06
  • vue3.x ref()语法糖赋值方式

    vue3.x ref()语法糖赋值方式

    这篇文章主要介绍了vue3.x ref()语法糖赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue项目使用electron打包桌面应用方式

    Vue项目使用electron打包桌面应用方式

    本文详细介绍了如何使用Vue3和Electron创建一个桌面应用程序,并提供了一个完整的步骤指南,包括项目初始化、配置、安装依赖、主进程和渲染进程的设置、打包配置以及解决常见问题的方法
    2025-12-12
  • 解决vue3项目打包发布到服务器后访问页面显示空白问题

    解决vue3项目打包发布到服务器后访问页面显示空白问题

    这篇文章主要介绍了解决vue3项目打包发布到服务器后访问页面显示空白问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue-cli项目无法用本机IP访问的解决方法

    vue-cli项目无法用本机IP访问的解决方法

    今天小编就为大家分享一篇vue-cli项目无法用本机IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上，从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文
    2017-11-11
  • 如何解决ECharts图表切换后缩成一团的问题

    如何解决ECharts图表切换后缩成一团的问题

    这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10

最新评论