使用vue-cli 搭建vue项目
通过npm安装vuex npm install vuex --save
在main.js中引入和配置vuex
import Vue from 'vue'
import 'es6-promise/auto' // 防止浏览器不支持promise 可通过 npm install es6-promise --save 安装
import App from './App'
import router from './router'
import vuex from 'vuex'
/* eslint-disable no-new */
Vue.use(vuex);
var store = new vuex.Store({//store对象
state:{
show:"123456"
}
})
new Vue({
el: '#app',
router,
store,//使用store
components: { App },
template: '<App/>'
})
在组件中使用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<h1>{{$store.state.show}}</h1>
</div>
</template>
<script>
export default {
created(){
this.fetchData()
},
watch:{
'$route':'fetchData'
},
methods:{
fetchData(){
var _this = this
console.log(_this.$store.state.show) // 123456
_this.$store.state.show = "654321"
},
},
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
当项目有很多组件时,将所有
store对象都放在了main.js里可能会比较杂乱不利于管理,我们可以为每一个组件都配置一个store。
先在src下新建一个文件夹叫store
在store下新建index.js文件
import 'es6-promise/auto'
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
state:{
show:'bbbbbb'
},
})
修改main.js
import Vue from 'vue'
// import 'es6-promise/auto'
import App from './App'
import router from './router'
// import vuex from 'vuex'
/* eslint-disable no-new */
// Vue.use(vuex);
// var store = new vuex.Store({//store对象
// state:{
// show:"aaaaaaa"
// }
// })
import store from './store'
new Vue({
el: '#app',
router,
store,//使用store
components: { App },
template: '<App/>'
})
现在main.js和vuex的内容就分开了,然后我们可以为某一组件单独写一个store,比如home组件
在store下新建home_store.js文件
export default {
state:{
hometext:"home的内容"
}
}
在store下index.js中引入
import 'es6-promise/auto'
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
import home_store from './home_store.js';//引入某个store对象
export default new vuex.Store({
state:{
show:'bbbbbb'
},
modules: { // 添加modules
home: home_store
}
})
这时就可以在组件中使用
<h1>{{$store.state.home.hometext}}</h1>