初学vue2 之使用vuex

使用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: ''
})

在组件中使用

当项目有很多组件时，将所有 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: ''
})

现在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
    }
})

这时就可以在组件中使用

{{$store.state.home.hometext}}