vuex使用一

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

至于为什么使用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)
}
}

一样也是可以达到改变状态的效果的