您好,登錄后才能下訂單哦!
這篇文章主要介紹“如何理解vue簡單的store”,在日常操作中,相信很多人在如何理解vue簡單的store問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”如何理解vue簡單的store”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
vue中的store最簡單的應(yīng)用就是全局存儲了。
我這里使用了兩個(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放我們操作變量的鍵值對:
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$/) // 它將自動要求模塊文件中的所有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$/) // 它將自動要求模塊文件中的所有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$/) // 它將自動要求模塊文件中的所有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的鍵所對應(yīng)的值里,也就是getters.js
存放的的鍵值對。
<template> <div class="hello"> <img src="../assets/logo.png" /> <br /> <input v-model="msg"/> <h3>{{ msg }}</h3> <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鍵所對應(yīng)的值。
<template> <div> 這是第二個(gè)頁面 <h3>{{ msg }}</h3> <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):
到此,關(guān)于“如何理解vue簡單的store”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。