- {{message}}
+ {{$store.state.message}}
+
+ {{ this.$store.getters.firstMessage }}
+
+
+
+
+
@@ -8,7 +15,20 @@
export default {
data () {
return {
- message: 'Hello World!'
+ }
+ },
+ created () {
+ console.log(this.callMessage())
+ },
+ methods: {
+ callMessage () {
+ return this.$store.getters.firstMessage
+ },
+ changeStateMessage () {
+ this.$store.commit('changeMessage', '#vueogreniyoruz eğitim serisi')
+ },
+ changeStateMessagewithAction () {
+ this.$store.dispatch('triggerChangeMessage', 'Vuex kullanımı')
}
}
}
diff --git a/src/main.js b/src/main.js
index 684ffac..80339f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,32 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
import Vue from 'vue'
+import Vuex from 'vuex'
import App from './App'
+// import { store } from './store'
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+ state: {
+ message: 'bilgisayaci.org'
+ },
+ getters: {
+ firstMessage: state => {
+ return state.message
+ }
+ },
+ mutations: {
+ changeMessage: (state, value) => {
+ state.message = value
+ }
+ },
+ actions: {
+ triggerChangeMessage: (context, value) => {
+ context.commit('changeMessage', value)
+ }
+ }
+})
Vue.config.productionTip = false
@@ -9,5 +34,6 @@ Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
+ store,
template: '