More consistent use of getters in UserInputPage

This commit is contained in:
theo1 2020-10-19 16:10:05 +02:00
parent 8b9445f29b
commit 01b07b0d0f
7 changed files with 57 additions and 26 deletions

View File

@ -14,6 +14,7 @@
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-markdown": "^2.2.4",
"vue-material": "^1.0.0-beta-15",
"vue-resource": "^1.5.1",
"vue-router": "^3.3.4",
"vuex": "^3.5.1"

View File

@ -15,10 +15,13 @@
<router-view id='sub-content'></router-view>
</transition>
</div>
</template>s
</template>
<script>
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
export default {
name: 'App',
components: {
@ -61,15 +64,30 @@ export default {
#top-band {
width:100%;
height:40px;
background : linear-gradient(#e6e6ff, #ffffff);
height:10px;
background-color: yellow;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
.nav {
display: flex;
align-items: center;
justify-content: center;
}
.nav-link {
display: inline-block;
width: 30em;
vertical-align: top;
max-width: 300px;
text-align: center;
}
</style>

View File

@ -16,7 +16,7 @@
<input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-modified')" value='today'><br>
</div>
<div class='form-group'>
<label for='meta-title'>meta title</label>
<label for='meta-title'>Title</label>
<input v-model='title' type='text' name='meta-title' id='meta-title' placeholder="What's up ?" class='form-control form-control-lg'>
</div>
</form>

View File

@ -1,6 +1,6 @@
<template>
<div>
<textarea v-model='userInput' placeholder="edit me" id='textbox'></textarea>
<textarea v-model="userInput" placeholder="edit me" id='textbox' value='this.articleText'></textarea>
</div>
</template>
@ -11,19 +11,26 @@ export default {
},
data: function(){
return {
userInput: this.articleText
}
},
computed :{
articleText () {
return this.$store.state.article.content
userInput: ""
}
},
// computed :{
// articleText () {
// let var_content = this.$store.getters.getContent
// console.log('getting article text in user input' + var_content)
// return this.$store.getters.getContent()
// }
// },
watch: {
// commits a mutation to the store at each change of the text to update global state
userInput: function(){
userInput : function(){
this.$emit('articleUpdate')
this.$store.commit('updateText', this.userInput)
}
},
mounted: function(){
this.userInput = this.$store.getters.getContent
console.log("Mounted ! " + this.$store.getters.getContent)
}
}
</script>

View File

@ -1,8 +1,8 @@
<template>
<div>
<article-form></article-form>
<UserInput class="input-area column"></UserInput>
<vue-markdown :source='articleText' class="column" id='render-area'></vue-markdown>
<UserInput class="input-area column" @articleUpdate="articleUpate"></UserInput>
<vue-markdown :source='userText' class="column" id='render-area'></vue-markdown>
<publish-button @update='articleUpate'></publish-button>
</div>
</template>
@ -25,19 +25,21 @@ export default {
},
data: function() {
return{
usertext: '',
}
},
computed: {
articleText() {
return this.$store.state.article.content
userText: '',
}
},
methods: {
// saves article content
articleUpate : function() {
this.$router.push('/published')
console.log('updating in UserInputPage')
this.userText = this.$store.getters.getContent
},
articlePublish: function(){
this.$router.push('/published')
}
},
mounted: function(){
this.userText = this.$store.getters.getContent
}
}
</script>

View File

@ -10,12 +10,15 @@ import VueResource from 'vue-resource'
import { store } from './store/store'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import VueMaterial from 'vue-material'
Vue.use(VueRouter)
Vue.use(BootstrapVue)
Vue.use(VueResource)
Vue.use(Vuex)
Vue.use(VueMaterial)
Vue.config.productionTip = false
const routes = [

View File

@ -16,7 +16,7 @@ export const store = new Vuex.Store({
}
},
getters: {
getContent (state) {
getContent(state) {
return state.article.content
}
},