vuex简单搭建使用

安装

npm install vuex --save

配置

1. 在src中创建store 文件夹
2. store创建 index.js
3. 引入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: '',
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']
},