至于为什么使用vuex在这里就不过多的解释了,直接进入正题
1.vuex的安装
cnpm install vuex -S
2.然后在main.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.构建核心仓库 store.js
Vuex 应用的状态 state 都应当存放在 store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。
但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。
在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({
// 定义状态
state: {
author: 'Wise Wrong'
}
}) export default store
这是一个最简单的 store.js，里面只存放一个状态 author
虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次,但是我自己直接在store.js里引入一次也是可以达到效果的
4.在映射到组件中
<template>
<footer class="footer">
<ul>
<li v-for="lis in ul">{{lis.li}}</li>
</ul>
<p>
Copyright © {{author}} - 2016 All rights reserved
</p>
</footer>
</template> <script>
export default {
name: 'footerDiv',
data () {
return {
ul: [
{ li: '琉璃之金' },
{ li: '朦胧之森' },
{ li: '缥缈之滔' },
{ li: '逍遥之火' },
{ li: '璀璨之沙' }
]
}
},
computed: {
author () {
return this.$store.state.author
}
}
}
</script>
这是 footer.vue 的 html 和 script 部分
主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author
页面渲染之后，就能获取到 author 的值
5.在组件中修改状态
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
methods:{
setAuthor: function () {
console.log(this.$store.state.author)
this.$store.commit("newAuthor",this.inputTxt)
}
}
然后在input里输入值就可以 看到author的变化了
方法二:store.js
// 状态管理器
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) const store = new Vuex.Store({
state : {
author: 'Wise Wrong'
},
mutations :{
newAuthor(state,msg){
state.author=msg;
}
},
actions : {}
})
export default store
组件:
methods:{
setAuthor: function () {
console.log(this.$store.state.author)
// this.$store.state.author = this.inputTxt
this.$store.commit("newAuthor",this.inputTxt)
}
}
一样也是可以达到改变状态的效果的