vuex的使用二

1.先看项目的目录结构

2.在main.js里需要引入store这个文件并挂在实例上

import store from './store/store'
............

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

3.store.js里引入action.js和mutation.js文件

// 状态管理器
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './action'
import mutations from './mutation'
Vue.use(Vuex)

const store = new Vuex.Store({
  state : {
    author: 'Wise Wrong',
    amsg: '',
  },
  actions,
  mutations,
  getters:{
    author(state){
      console.log(state)
      return state.author
    }
  }
})
export default store

4.action.js

import * as types from './mutation_type'
export default{
    newAuthor({commit},bData){
        commit(types.NEWAUTHOR,bData);
    }
}

5.mutation.js

import * as types from './mutation_type'
export default{
    [types.NEWAUTHOR](state,msg){
      state.author=msg;
    }
}

6.mutation_type.js

export const SEND_A="SEND_A"
export const NEWAUTHOR="NEWAUTHOR"

7.head.vue

temple:
<form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" v-model="inputTxt" class="form-control" placeholder="通过input改变author">
        </div>
        <button type="button" class="btn btn-default" @click="setAuthor">Submit</button>
      </form>

script:

data () {
    return {
      inputTxt:""
    }
  },
  methods:{
    setAuthor: function () {
      this.$store.dispatch("newAuthor", this.inputTxt);
    }
  }

8.foot.vue

<p>
      Copyright&nbsp;&copy;&nbsp;author:{{author}} - 2016 All rights reserved
    </p>

import { mapGetters} from 'vuex'  

computed: {
    ...mapGetters(['author'])
  }

9.效果