,可以通过以下步骤实现:
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 在这里定义存储的数据
data: ''
},
mutations: {
// 在这里定义修改数据的方法
setData(state, payload) {
state.data = payload
}
},
actions: {
// 在这里定义触发mutations的方法
fetchData({ commit }) {
// 在这里获取本地存储的数据,并通过commit方法触发mutations中的setData方法
const data = localStorage.getItem('data')
commit('setData', data)
}
}
})
export default store
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['data'])
},
methods: {
...mapActions(['fetchData'])
},
created() {
this.fetchData()
}
}
在上述代码中,使用了mapState将store中的data映射到组件的computed属性中,这样就可以通过this.data访问到存储的数据。同时,使用了mapActions将fetchData方法映射到组件的methods属性中,在组件创建时调用该方法,从而触发store中的actions中的fetchData方法,获取本地存储的数据并更新store中的state。
这样,就可以在另一个路由中通过vuex访问到本地存储中的数据了。
注意:上述代码中的本地存储使用了localStorage,你也可以根据实际需求使用其他方式进行本地存储。
领取专属 10元无门槛券
手把手带您无忧上云