的方法有多种,下面是一些常用的方法:
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">更新数据</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '初始数据'
}
},
methods: {
updateMessage() {
this.message = '更新后的数据'
}
}
}
</script>
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: '初始数据'
},
mutations: {
updateMessage(state, payload) {
state.message = payload
}
},
actions: {
updateMessage({ commit }, payload) {
commit('updateMessage', payload)
}
},
getters: {
getMessage(state) {
return state.message
}
}
})
// 组件中使用
<template>
<div>
<p>{{ message }}</p>
<button @click="updateMessage">更新数据</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['message'])
},
methods: {
...mapActions(['updateMessage'])
}
}
</script>
// 存储数据
localStorage.setItem('message', '数据')
// 获取数据
const message = localStorage.getItem('message')
// 父组件
<template>
<div>
<child-component :message="message"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
message: '数据'
}
}
}
</script>
// 子组件
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
这些方法可以根据具体的需求选择使用,根据数据的复杂度和共享范围选择合适的方式来保存和使用数据。
云+社区技术沙龙[第7期]
停课不停学第四期
DB・洞见
微搭低代码直播互动专栏
微服务平台TSF系列直播
实战低代码公开课直播专栏
北极星训练营
实战低代码公开课直播专栏
云+社区技术沙龙 [第31期]
云+社区技术沙龙[第28期]
领取专属 10元无门槛券
手把手带您无忧上云