Vuex入门小例子

vuex教程
看完上面的教程，完成一个小例子
改变前：

改变后：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk//index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
  <Header></Header>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: 'App',
  components: {
     Header
  }
}
</script>

<style>
html,
#app {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  max-height: 100%;
  position: relative;
}

</style>

vuex/store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 定义状态
const state = {
    content:'2008-2017'
};
// 异步修改状态
const actions = {
    //传入上下文对象
    changeAction:function ({commit},value) {        
         commit('newAuthor', value)
    }
}
// 同步改变状态的方法
const mutations =  {
    newAuthor(state, msg){
        state.content = msg
    }
}
// 计算操作
const getters = {
    content:function (state) {
        return state.content + "啦啦啦"
    }
}
export default new Vuex.Store({
    state, mutations, getters, actions

});

components/Header.vue

<template>
  <header>  
    <el-input placeholder="请输入内容" v-model="inputText" >
        <el-button slot="append" icon="el-icon-search" @click="newAuthor"></el-button>
    </el-input>
    <p>{{content}}</p>
  </header>
</template>
<script>
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
  data () {
      return {
          inputText:''
      }
  },
  computed:{
      ...mapState(["content"]), 
      ...mapGetters(["content"])
  },
  methods:{
      newAuthor(){
          this.$store.dispatch('changeAction',this.inputText)
      }
  }

}
</script>