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.效果

最新文章

  1. [转]C/C++ 程序员必须收藏的资源大全
  2. Linux服务器安装笔记 汇总
  3. hadoop io PART1
  4. Web安全
  5. [python学习笔记]Day3
  6. 《TCP/IP详解 卷一》读书笔记-----动态路由协议
  7. SDUT 2610 Boring Counting(离散化+主席树区间内的区间求和)
  8. 转:CSS布局奇淫技巧之-宽度自适应
  9. SQL SERVER – Import CSV File Into SQL Server Using Bulk Insert – Load Comma Delimited File Into SQL Server
  10. nyoj 79 拦截导弹 (动态规划)
  11. 过滤字符串html标签方法
  12. 606. Construct String from Binary Tree
  13. js模拟浏览器加载效果 pace.js 中文官方文档
  14. 使用dynamic引发的异常:无法对 null 引用执行运行时绑定
  15. java把类似a=1&amp;b=2&amp;c=3的String类型数据转成map集合
  16. dapper视频
  17. Bootstrap+Angularjs自制弹框
  18. 如何修改被hosts.deny禁止访问的IP
  19. pandas常用
  20. XML_CPP_资料_libXml2_01_Code

热门文章

  1. 扩展JS Date对象时间格式化功能
  2. 修改Centos 6.5的yum源
  3. SPOJ QTREE Query on a tree --树链剖分
  4. ReactiveCocoa入门教程:第一部分
  5. Java中的String、StringBuilder、StringBuffer
  6. (转)redis 学习笔记(1)-编译、启动、停止
  7. java建立二叉树,递归/非递归先序遍历,递归/非递归中序遍历,层次遍历
  8. Linux常用设置
  9. 蓝牙代理报错:invalid handle error
  10. 关于.net 对excel操作的方法
  11. C++中的动态类型与动态绑定、虚函数、运行时多态的实现
  12. 【百度地图API】如何激发手机的高分辨率
  13. Perl线程池
  14. NOIP基本算法
  15. docker部署pinpoint
  16. js怎么能取得多选下拉框选中的多个值?
  17. python操作excel文件一(xlrd读取文件)
  18. 全面理解JavaScript中的 this
  19. 深入理解JSCore
  20. MD5加密算法原理及其应用