vue简单的store详解

更新时间：2021年10月25日 15:11:18 作者：Lazy_Goat

这篇文章主要介绍了详解vue简单的store，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue中的store最简单的应用就是全局存储了。

我这里使用了两个组件在相互跳转（Helloworld.vue和twopage.vue），前者是用来向store中放数据的，后者是从store取数据的。

首先需要安装vuex： npm install vuex --save ；

因为要跳转所以少不了安装路由router：npm install vue-router --save

新建store文件夹在里面新建modules文件夹、getters.js、index.js；

在modules建mystate.js

在这里插入图片描述

mystate中放我们的变量msg：

const state = {
    msg: '这是我的状态',
}
export default {
    state
}

getters放我们操作变量的键值对：

const getters  = {
    msg:state => state.mystate.msg,
}
export default getters

index中是用来配置并且创建vuex.store的：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// 它将自动要求模块文件中的所有vuex模块
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters,
})
export default store

需要在main.js的vue实例中调用store和router（两个页面的路由在后面）：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// 它将自动要求模块文件中的所有vuex模块
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters,
})
export default store

在router下的index.js中配置两个路由：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// 它将自动要求模块文件中的所有vuex模块
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters,
})
export default store

在App.vue中使用路由视图：

<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最后就是两个页面组件了，HelloWorld.vue：

双向绑定并且监听msg，将msg的新值放入全局变量中。

监听触发的方法是setstate；

sessionStorage.setItem('msg', value)是用来把value的值放入叫msg的键所对应的值里，也就是getters.js存放的的键值对。

<template>
  <div class="hello">
    <img src="../assets/logo.png" />
    <br />
    <input v-model="msg"/>
    <h2>{{ msg }}</h2>
    <router-link to="/two">我去要去第二个页面</router-link>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to 新的vue项目",
    };
  },
  methods: {
    setstate(value) {
      sessionStorage.setItem('msg', value);
    },
  },
  watch: {
    msg(newName, oldName) {
      this.setstate(newName);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
</style>

在第二个页面组件twopage.vue中需要把存的msg拿出来：

sessionStorage.getItem('msg')获取msg键所对应的值。

<template>
  <div>
    这是第二个页面
    <h2>{{ msg }}</h2>
    <router-link to="/">我要回去</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    setmsg() {
        this.msg = sessionStorage.getItem('msg');
    },
  },
  created(){
      this.setmsg()
  }
};
</script>

目录结构：

在这里插入图片描述

演示：

初始状态：

在这里插入图片描述

使输入框的内容发生变化：

在这里插入图片描述

前往第二个页面：

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

vue draggable组件实现拖拽及点击无效问题的解决
这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧
2022-05-05
在vue中使用inheritAttrs实现组件的扩展性介绍
这篇文章主要介绍了在vue中使用inheritAttrs实现组件的扩展性介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
Vue 的 v-model用法实例
这篇文章主要介绍了Vue 的 v-model用法实例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-11-11
详解如何在nuxt中添加proxyTable代理
这篇文章主要介绍了详解如何在nuxt中添加proxyTable代理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结
这篇文章主要给大家介绍了关于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他们之家的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
vue响应式Object代理对象的修改和删除属性
这篇文章主要为大家介绍了vue响应式Object代理对象的修改和删除属性示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Echarts实现一张图现切换不同的X轴(实例代码)
这篇文章主要介绍了Echarts 如何实现一张图现切换不同的X轴,通过动图给大家展示效果，实例代码相结合给大家介绍的非常详细，需要的朋友可以参考下
2021-11-11
Vue3中虚拟dom转成真实dom的过程详解
Vue.js 在其运行过程中会将模板编译成虚拟 DOM (VNode),然后再将 VNode 渲染成实际的 DOM 节点,这个过程是由 Vue 内部的编译器和渲染系统完成的,本文给大家介绍了Vue3中虚拟dom转成真实dom的过程,需要的朋友可以参考下
2024-09-09
vue3和beego跨域请求配置方式
文章介绍了如何在Vue3和Beego中配置跨域请求,在Beego的router.go文件的init函数中添加option函数来回应预检请求,以支持跨域请求,这是个人经验分享,希望能帮助到大家
2025-01-01
Vue封装localStorage设置过期时间的示例详解
这篇文章主要介绍了Vue封装localStorage设置过期时间的相关资料,在这个示例中,我们在MyComponent.vue组件的setup函数中导入了setItemWithExpiry和getItemWithExpiry函数,并在函数内部使用它们来设置和获取带有过期时间的localStorage数据,需要的朋友可以参考下
2024-06-06

vue简单的store详解

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具