vue簡(jiǎn)單的store詳解
vue中的store最簡(jiǎn)單的應(yīng)用就是全局存儲(chǔ)了。
我這里使用了兩個(gè)組件在相互跳轉(zhuǎn)(Helloworld.vue
和twopage.vue
),前者是用來向store中放數(shù)據(jù)的,后者是從store取數(shù)據(jù)的。
首先需要安裝vuex: npm install vuex --save
;
因?yàn)橐D(zhuǎn)所以少不了安裝路由router:npm install vue-router --save
新建store文件夾在里面新建modules文件夾、getters.js
、index.js
;
在modules建mystate.js
mystate中放我們的變量msg:
const state = { msg: '這是我的狀態(tài)', } export default { state }
getters放我們操作變量的鍵值對(duì):
const getters = { msg:state => state.mystate.msg, } export default getters
index中是用來配置并且創(chuàng)建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$/) // 它將自動(dòng)要求模塊文件中的所有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實(shí)例中調(diào)用store和router(兩個(gè)頁面的路由在后面):
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$/) // 它將自動(dòng)要求模塊文件中的所有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
中配置兩個(gè)路由:
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$/) // 它將自動(dòng)要求模塊文件中的所有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>
最后就是兩個(gè)頁面組件了,HelloWorld.vue
:
雙向綁定并且監(jiān)聽msg,將msg的新值放入全局變量中。
監(jiān)聽觸發(fā)的方法是setstate;
sessionStorage.setItem('msg', value)
是用來把value的值放入叫msg的鍵所對(duì)應(yīng)的值里,也就是getters.js
存放的的鍵值對(duì)。
<template> <div class="hello"> <img src="../assets/logo.png" /> <br /> <input v-model="msg"/> <h2>{{ msg }}</h2> <router-link to="/two">我去要去第二個(gè)頁面</router-link> </div> </template> <script> export default { name: "HelloWorld", data() { return { msg: "Welcome to 新的vue項(xiàng)目", }; }, 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>
在第二個(gè)頁面組件twopage.vue
中需要把存的msg拿出來:
sessionStorage.getItem('msg')
獲取msg鍵所對(duì)應(yīng)的值。
<template> <div> 這是第二個(gè)頁面 <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>
目錄結(jié)構(gòu):
演示:
初始狀態(tài):
使輸入框的內(nèi)容發(fā)生變化:
前往第二個(gè)頁面:
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue簡(jiǎn)易注冊(cè)頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例
本文主要介紹了Vue簡(jiǎn)易注冊(cè)頁面+發(fā)送驗(yàn)證碼功能的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用vue實(shí)現(xiàn)點(diǎn)擊按鈕滑出面板的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-01-01Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue-cli 使用json server在本地模擬請(qǐng)求數(shù)據(jù)的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-11-11關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無法監(jiān)聽bug,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過程
這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘W鲰?xiàng)目,特別是后臺(tái)管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03