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;//抛出
/
使用
import store from './state/index.js'
console.log( store.state.user.http)