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", "core-js": "^3.6.5",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-markdown": "^2.2.4", "vue-markdown": "^2.2.4",
"vue-material": "^1.0.0-beta-15",
"vue-resource": "^1.5.1", "vue-resource": "^1.5.1",
"vue-router": "^3.3.4", "vue-router": "^3.3.4",
"vuex": "^3.5.1" "vuex": "^3.5.1"

View File

@ -15,10 +15,13 @@
<router-view id='sub-content'></router-view> <router-view id='sub-content'></router-view>
</transition> </transition>
</div> </div>
</template>s </template>
<script> <script>
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
export default { export default {
name: 'App', name: 'App',
components: { components: {
@ -61,15 +64,30 @@ export default {
#top-band { #top-band {
width:100%; width:100%;
height:40px; height:10px;
background : linear-gradient(#e6e6ff, #ffffff); background-color: yellow;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active, .fade-leave-active {
transition: opacity .5s; 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; opacity: 0;
} }
</style> .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> <input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-modified')" value='today'><br>
</div> </div>
<div class='form-group'> <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'> <input v-model='title' type='text' name='meta-title' id='meta-title' placeholder="What's up ?" class='form-control form-control-lg'>
</div> </div>
</form> </form>

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <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> </div>
</template> </template>
@ -11,19 +11,26 @@ export default {
}, },
data: function(){ data: function(){
return { return {
userInput: this.articleText userInput: ""
}
},
computed :{
articleText () {
return this.$store.state.article.content
} }
}, },
// 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: { watch: {
// commits a mutation to the store at each change of the text to update global state // commits a mutation to the store at each change of the text to update global state
userInput: function(){ userInput : function(){
this.$store.commit('updateText', this.userInput) 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> </script>

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<article-form></article-form> <article-form></article-form>
<UserInput class="input-area column"></UserInput> <UserInput class="input-area column" @articleUpdate="articleUpate"></UserInput>
<vue-markdown :source='articleText' class="column" id='render-area'></vue-markdown> <vue-markdown :source='userText' class="column" id='render-area'></vue-markdown>
<publish-button @update='articleUpate'></publish-button> <publish-button @update='articleUpate'></publish-button>
</div> </div>
</template> </template>
@ -25,19 +25,21 @@ export default {
}, },
data: function() { data: function() {
return{ return{
usertext: '', userText: '',
}
},
computed: {
articleText() {
return this.$store.state.article.content
} }
}, },
methods: { methods: {
// saves article content // saves article content
articleUpate : function() { 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> </script>

View File

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

View File

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