在vuex.js中保存存储中输入的文本,需要遵循以下步骤:
// textModule.js
export default {
state: {
inputText: '', // 初始化输入文本为空字符串
},
mutations: {
SET_INPUT_TEXT(state, text) {
state.inputText = text;
},
},
actions: {
setInputText({ commit }, text) {
commit('SET_INPUT_TEXT', text);
},
},
getters: {
getInputText(state) {
return state.inputText;
},
},
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import textModule from './textModule';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
text: textModule, // 注册textModule模块
},
//其他配置项...
});
<template>
<div>
<input type="text" v-model="inputText" />
<button @click="saveText">保存</button>
</div>
</template>
<script>
export default {
data() {
return {
inputText: '',
};
},
methods: {
saveText() {
this.$store.dispatch('text/setInputText', this.inputText);
// 通过调用text模块的setInputText action来保存输入的文本到vuex中
},
},
};
</script>
<template>
<div>
<p>保存的文本: {{ savedText }}</p>
</div>
</template>
<script>
export default {
computed: {
savedText() {
return this.$store.getters['text/getInputText'];
// 通过text模块的getInputText getter来获取保存的文本
},
},
};
</script>
通过以上步骤,你可以在vuex中保存存储中输入的文本,并且在需要的地方获取该文本。如果在实施过程中出现问题,请提供更多详细信息,以便我们更准确地帮助解决。
领取专属 10元无门槛券
手把手带您无忧上云