安装
npm install vuex --save
配置
- 在src中创建store 文件夹
- store创建 index.js
- 引入vue
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
home: 0,
},
actions: {
},
mutations: {
setHome (state, obj) {
state.home = obj.home
},
},
getters: {
home(state) {
return state.home
},
},
})
export default store
4.在main.js中引入vueX
import store from './store'
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
使用
获取store中的数据
1.在vue文件中引入vue
import {mapGetters} from 'vuex'
export default {
computed: {
...mapGetters({
home: 'home'
})
}
修改store中的数据
this.$store.state.home = 4
或者
this.$store.commit("setHome",4)
注意事项
IE兼容问题
在ie浏览器上报错
[vuex] vuex requires a Promise polyfill in this browser.
报错原因
IE浏览器没有内置的Promise对象，而且ES6新增语法在IE上也不能使用，比如Array.from，因为babel只会转译语法，新语法无法转义。
解决办法
1.安装babel-polyfill
npm install --save-dev babel-polyfill
2.修改配置webpack.base.config.js
entry: {
app: ['babel-polyfill','./src/main.js']
},
