初学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: '<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>

初学vue2 之使用vuex

猜你喜欢