vuex使用

1.开发环境中安装 vuex :
npm install vuex --save
2

在src 目录下 , 新建一个 store 文件夹,方便维护管理 , 然后在里面新建一个 index.js :

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user.js' // 用户信息
import car from './car.js' //购物车
Vue.use(Vuex)
//组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护
//可以使用 vuex 的 modules

export default new Vuex.Store({
	modules:{
		user:user,
		car
	},
	 state: {
		 
	},
	 mutations: {
	   
	},
	 actions: {

	}
})

在main.js中引入index.js  并在实例化vue对象中加入store对象

//使用vuex
import store from './static/state/index.js'

const app = new Vue({
	store,//在vue实例中使用store
    ...App
})

3,modules管理的user.js代码

const user = {
    state: {
        token: token,
        userList:{    //用户信息
           tel:null,
		   username: ''
        },
    },
    //mutations 用来管理修改state
    mutations :{
	   addUserlist(state,str){ //这里的state对应着上面这个state
		    state.userList= str
	   },
	   addToken(state,str){
		   state.token=str
	   }
    },
    actions:{

    }
}

export default user;//抛出

 

 

你可能感兴趣的:(vue)