vuex 知识汇总
练习vuex已经是几天前的事情了，今天来公司加班顺手就做一下总结吧。
首先vuex是什么呢？vuex是一个专门为vue.js应用程序开发的状态管理模式，总而言之就是一种管理模式。
vuex的核心就是store，就相当于是一个仓库，里面包含这个所有的状态（state），我的理解其实vuex.store就是一个全局对象。
但是还是有点区别的就是：
第一点：vuex的状态是响应式的，当访问的状态方式变化时，组件也会发生响应的变化，
第二点：改变状态的途径只有一种方法就是通过mutation来改变状态。
读取全局状态：
vuex一旦注入我们就能在项目中任意一个组件中通过this.$store.state.count 来读取状态
同时还有一个辅助函数:mapState(['']) 记得使用是应该先导入函数import mapState from vuex.
例如mapState(['count']) == 'count':this.$store.state.count 就等于给组件增加了一个新的属性
还有一种就是我们使用...mapGetters(['totalCount','completeCount']),从getters模块中调用方法
写入全局状态
写入全局状态有两种方法
第一种是this.$store.dispatch('action1'，param) 触发action模块中方法，然后再action中 使用action1（{commit}，same_name）{这里是我们可以来进行异步操作也就是说和mysql来进行交互的地方}，然后action会触发mutation中的方法same_name(state,param){这里是改变state状态的地方},值得注意的是action中的第二个参数和mutation中的函数名也就是same_name 必须相同
第二种是直接使用辅助函数...mapAction(['action'])分发方法触发action中的方法，接下来的步骤一样。
第三种是this.$store.commit('same_name') 这个方法直接触发mutation模块修改state，跳过了action
举例：1.
2.index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})state.js
//状态对象
export default {
todos:[]
}action.js
//包含多个 接受组件 触发mutation调用间接状态的 方法对象
import {ADD_TODO,DELETE_TODO,SELECT_ALL,CLEAR_ALL,REQ_TODOS} from './mutations_type.js'
import storageUtil from '../Util/StorageUtil.js'
export default {
addTodo({commit},todo) {
commit(ADD_TODO,{todo}) //
},
deleteItem({commit},index){
commit(DELETE_TODO,{index})
},
selectAllTodos({commit},value) {
commit(SELECT_ALL,{value})
},
clearAllCompleted({commit}) {
commit(CLEAR_ALL)
},
reqTodos({commit}) {
setTimeout(()=>{
const todos = storageUtil.readTodos()
commit(REQ_TODOS,todos)
},1000)
}
}mutation.js
import {ADD_TODO,DELETE_TODO,CLEAR_ALL,SELECT_ALL,REQ_TODOS} from './mutations_type.js'
export default {
[ADD_TODO](state,{todo}) {
state.todos.unshift(todo)
},
[DELETE_TODO](state,{index}) {
state.todos.splice(index,1)
},
[SELECT_ALL] (state,value) {
state.todos.forEach(todo=>todo.complete = value)
},
[CLEAR_ALL] (state) {
state.todos = state.todos.filter(todo=>!todo.complete)
},
[REQ_TODOS] (state,value) {
state.todos = value
}
}getters.js
/*
包含所有基于state的getter计算属性的对象
*/
export default {
//总数量
totalCount (state) {
return state.todos.length
},
//完成的数量
completeCount(state) {
return state.todos.reduce ((preTotal,todo)=>{
return preTotal + (todo.complete ? 1 :0)
},0)
},
//是否全部选中
isAllSelect(state,getters) {
return getters.completeSize === getters.completeCount && state.todos.length > 0
}
}mutatio_type.js
export const ADD_TODO = 'add_todo'
export const DELETE_TODO = 'delete_todo'
export const SELECT_ALL = 'select_all'
export const CLEAR_ALL = 'clear_all'
export const REQ_TODOS = 'req_todos'
细节：action和mutation两个模块中的action的第二个参数和mutation的方法名必须一致，为了防止出错所以定义常量
但是在mutation中如果使用常量必须要这么用 [常量名]