Vue2.0之vuex的安装及使用

安装

npm install vuex --save

将store对象定义在main.js中

import Vuex from 'vuex'
Vue.use(Vuex);
var store = new Vuex.Store({
    state:{
    	msg:'123'
    },
    mutations:{
    },
    actions:{
    }
})

在实例化vue对象时加入store

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

通过$store.state.msg即可访问

computed:{
			msg(){
				return this.$store.state.msg
			}
		},

或者mapState辅助函数

import {mapState} from 'vuex'


computed: {
			...mapState(['msg']),
		},

但是一般在实际开发项目过程中，为了方便维护，一般会把store对象分离出main.js

先在src目录下新建store文件夹，在该文件夹下新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
	msg:'123456'
}

const mutations = {
	
}

const actions = {
	
}

export default new Vuex.Store({
	state,
	actions,
	mutations,
})

import store from './store/'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

如果组件过多，可以使用vuex的modules

store文件夹下的index.js修改为

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

import adminInfofrom '../components/adminInfo.js';

export default new Vuex.Store({
    modules: {
        user: userInfo
    }
})

引入的userInfo.js中

export default {
    state:{
        msg:'1234'
    }
}

使用时将$store.state.msg改为 $store.state.user.msg