1.State
vuex的状态管理，需要依赖它的状态树
Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
我们要把我们需要做状态管理的量放到这里来，然后在后面的操作动它
const state = {
selects: {},
height: window.innerHeight,
IE9: navigator.userAgent.indexOf('MSIE 9.0') > -1,
isIE: !!window.ActiveXObject || 'ActiveXObject' in window
}
2.Mutation
我们有了state状态树，我们要改变它的状态（值），就必须用vue指定唯一方法 mutation，官网说：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
任何不以mutation的方式改变state的值，都是耍流氓（违法）
写一个mutation例子：
constmutation = {
setSelects: (state, selects) => {
state.selects = selects
},
setHeight: state => {
state.height = window.innerHeight
state.width = window.innerWidth
state.size = state.height * state.width
}
}
3.action
作用跟mutation的作用是一致的，它提交mutation，从而改变state，是改变state的一个增强版，官网说：
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
写一个action例子：
actions: {
GetOptions({ commit }) {
return new Promise((resolve, reject) => {
const selects = getLocalStorage('selects')
if (!selects) {
getSelectOption().then(res => {
const datas = res.data
const menuDatas = data.classify(datas, 'parentId')
setLocalStorage('selects', menuDatas)
commit('setSelects', menuDatas)
resolve()
}).catch(error => {
reject(error)
})
} else {
commit('setSelects', selects)
resolve()
}
})
},
WindowResize({ commit }) {
commit('setHeight')
}
}
4.Getter
官网说：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。减少我们对这些状态数据的操作
简单粗暴理解：状态树上的数据比较复杂了，我们使用的时候要简化操作，上面的state.todos 是一个对象，在组件中挑不同的数据时，需要对其做下处理，这样每次需要一次就处理一次，我们简化操作，将其在getter中处理好，然后export 一个方法；（额，好像说复杂了）
写一个getter例子：
const getters = {
getToDo (state) {
return state.todos.filter(item => item.done === true)
// filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
}
}
用法：...mapGetters({
todosALise: 'getToDo'// getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
}),
引用详细文章：http://www.php.cn/js-tutorial-394694.html
网友评论