简介
Vuex 是一个专为 Vue.js 应用开发的 状态管理模式 , 它可以集中管理应用所有组件的状态
使用
安装vuex npm install vuex --save创建 store
import Vue
from 'vue'
import Vuex
from 'vuex'
Vue
.use(Vuex
)
const state
= {
user
: ls
.getItem('user')
}
const mutations
= {
UPDATE_USER(state
, user
) {
state
.user
= user
ls
.setItem('user', user
)
}
}
上面的
UPDATE_USER 是事件类型名称，大写不是必须的，后期可以使用常量代替事件类型。参数 state 是当前仓库的 state，user 是用户传入的参数，多参数的时候应该使用一个对象
const actions
= {
login({ commit
}, user
) {
if (user
) commit('UPDATE_USER', user
)
router
.push('/')
}
}
action 的第一个参数是一个与仓库实例具有相同方法和属性的 context 对象，可以从 context
.state 访问仓库的 state，使用 context
.commit 提交一个事件类型。可以在第一个参数使用参数解构来简化代码，如
{ commit
}。
不使用参数解构的 actions：
const actions
= {
login(context
, user
) {
if (user
) context
.commit('UPDATE_USER', user
)
router
.push('/')
}
}
const store
= new Vuex.Store({
state
,
mutations
,
actions
})
我们使用
new Vuex.Store 创建了一个新的 store（仓库）实例，其配置项说明：
state：共享的状态，我们不能直接更改状态，但是可以像 store
.state
.user 这样访问一个状态；
mutations：更改状态的方法，我们可以在这里更改状态，调用方法是像 store
.commit('UPDATE_USER', user
) 这样提交一个事件类型，这里不能包含异步操作；
actions：类似于 mutations，但我们不在这里直接更改状态，而是提交前面的 mutation，调用方法是像 store
.dispatch('login') 这样分发一个事件，这里可以包含异步操作；
入口js文件引入 store 并注入 store
组件内怎么访问 store
我们通过 store 选项，将仓库实例注入到每一个子组件中，这样子组件就能通过 this.$store 访问仓库
