关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
应用结构
实际上，Vuex在怎么组织你的代码结构上面没有任何限制，相反，它强制规定了一系列高级的原则：
1、应用级的状态集中放在store中。
2、改变状态的唯一方式是提交mutations，这是个同步的事务。
3、异步逻辑应该封装在action中。
只要你遵循这些规则，怎么构建你的项目的结构就取决于你了。如果你的store文件非常大，仅仅拆分成action、mutation和getter多个文件即可。
对于稍微复杂点的应用，我们可能都需要用到模块。下面是一个简单的项目架构：
├──index.html
├──main.js
├──api
│ └──...#这里发起API请求
├──components
│ ├──App.vue
│ └──...
└──store
├──index.js #组合modules、exportstore
├──actions.js #根action
├──mutations.js #根mutations
└──modules
├──cart.js #cart模块
└──products.js #products模块
关于更多，查看购物车实例。
Modules
由于使用了单一状态树，应用的所有状态都包含在一个大对象内。但是，随着我们应用规模的不断增长，这个Store变得非常臃肿。
为了解决这个问题，Vuex允许我们把store分module（模块）。每一个模块包含各自的状态、mutation、action和getter，甚至是嵌套模块，如下就是它的组织方式：
constmoduleA={
state:{...},
mutations:{...},
actions:{...},
getters:{...}
}
constmoduleB={
state:{...},
mutations:{...},
actions:{...}
}
conststore=newVuex.Store({
modules:{
a:moduleA,
b:moduleB
}
})
store.state.a//->moduleA'sstate
store.state.b//->moduleB'sstate
模块本地状态
模块的mutations和getters方法第一个接收参数是模块的本地状态。
constmoduleA={
state:{count:0},
mutations:{
increment:(state){
//state是模块本地的状态。
state.count++
}
},
getters:{
doubleCount(state){
returnstate.count*2
}
}
}
相似地，在模块的actions中，context.state暴露的是本地状态，context.rootState暴露的才是根状态。
constmoduleA={
//...
actions:{
incrementIfOdd({state,commit}){
if(state.count%2===1){
commit('increment')
}
}
}
}
在模块的getters内，根状态也会作为第三个参数暴露。
constmoduleA={
//...
getters:{
sumWithRootCount(state,getters,rootState){
returnstate.count+rootState.count
}
}
}
命名空间
要注意，模块内的actions、mutations以及getters依然注册在全局命名空间内——这就会让多个模块响应同一种mutation/action类型。你可以在模块的名称中加入前缀或者后缀来设定命名空间，从而避免命名冲突。如果你的Vuex模块是一个可复用的，执行环境也未知的，那你就应该这么干了。距离，我们想要创建一个todos模块：
//types.js
//定义getter、action和mutation的常量名称
//并且在模块名称上加上`todos`前缀
exportconstDONE_COUNT='todos/DONE_COUNT'
exportconstFETCH_ALL='todos/FETCH_ALL'
exportconstTOGGLE_DONE='todos/TOGGLE_DONE'
//modules/todos.js
import*astypesfrom'../types'
//用带前缀的名称来定义getters,actionsandmutations
consttodosModule={
state:{todos:[]},
getters:{
[types.DONE_COUNT](state){
//...
}
},
actions:{
[types.FETCH_ALL](context,payload){
//...
}
},
mutations:{
[types.TOGGLE_DONE](state,payload){
//...
}
}
}
注册动态模块
你可以用store.registerModule方法在store创建之后注册一个模块：
store.registerModule('myModule',{
//...
})
模块的store.state.myModule暴露为模块的状态。
其他的Vue插件可以为应用的store附加一个模块，然后通过动态注册就可以使用Vuex的状态管理功能了。例如，vuex-router-sync库，通过在一个动态注册的模块中管理应用的路由状态，从而将vue-router和vuex集成。
你也能用store.unregisterModule(moduleName)移除动态注册过的模块。但是你不能用这个方法移除静态的模块（也就是在store创建的时候声明的模块）。
Plugins
Vuex的store接收plugins选项，这个选项暴露出每个mutation的钩子。一个Vuex的插件就是一个简单的方法，接收sotre作为唯一参数：
constmyPlugin=store=>{
//当store在被初始化完成时被调用
store.subscribe((mutation,state)=>{
//mutation之后被调用
//mutation的格式为{type,payload}。
})
}
然后像这样使用：
conststore=newVuex.Store({
//...
plugins:[myPlugin]
})
在插件内提交Mutations
插件不能直接修改状态-这就像你的组件，它们只能被mutations来触发改变。
通过提交mutations，插件可以用来同步数据源到store。例如，为了同步websocket数据源到store(这只是为说明用法的例子，在实际中，createPlugin方法会附加更多的可选项，来完成复杂的任务)。
exportdefaultfunctioncreateWebSocketPlugin(socket){
returnstore=>{
socket.on('data',data=>{
store.commit('receiveData',data)
})
store.subscribe(mutation=>{
if(mutation.type==='UPDATE_DATA'){
socket.emit('update',mutation.payload)
}
})
}
}
constplugin=createWebSocketPlugin(socket)
conststore=newVuex.Store({
state,
mutations,
plugins:[plugin]
})
生成状态快照
有时候插件想获取状态“快照”和状态的改变前后的变化。为了实现这些功能，需要对状态对象进行深拷贝：
constmyPluginWithSnapshot=store=>{
letprevState=_.cloneDeep(store.state)
store.subscribe((mutation,state)=>{
letnextState=_.cloneDeep(state)
//对比prevState和nextState...
//保存状态，用于下一次mutation
prevState=nextState
})
}
**生成状态快照的插件只能在开发阶段使用，使用Webpack或Browserify，让构建工具帮我们处理：
conststore=newVuex.Store({
//...
plugins:process.env.NODE_ENV!=='production'
?[myPluginWithSnapshot]
:[]
})
插件默认会被起用。为了发布产品，你需要用Webpack的DefinePlugin或者Browserify的envify来转换process.env.NODE_ENV!=='production'的值为false。
内置Logger插件
如果你正在使用vue-devtools，你可能不需要。
Vuex带来一个日志插件用于一般的调试:
importcreateLoggerfrom'vuex/dist/logger'
conststore=newVuex.Store({
plugins:[createLogger()]
})
createLogger方法有几个配置项：
constlogger=createLogger({
collapsed:false,//自动展开记录mutation
transformer(state){
//在记录之前前进行转换
//例如，只返回指定的子树
returnstate.subTree
},
mutationTransformer(mutation){
//mutation格式{type,payload}
//我们可以按照想要的方式进行格式化
returnmutation.type
}
})
日志插件还可以直接通过<script>标签,然后它会提供全局方法createVuexLogger。
要注意，logger插件会生成状态快照，所以仅在开发环境使用。
严格模式
要启用严格模式，只需在创建Vuexstore的时候简单地传入strict:true。
conststore=newVuex.Store({
//...
strict:true
})
在严格模式下，只要Vuex状态在mutation方法外被修改就会抛出错误。这确保了所有状态修改都会明确的被调试工具跟踪。
开发阶段vs.发布阶段
不要在发布阶段开启严格模式！严格模式会对状态树进行深度监测来检测不合适的修改——确保在发布阶段关闭它避免性能损耗。
跟处理插件的情况类似，我们可以让构建工具来处理：
conststore=newVuex.Store({
//...
strict:process.env.NODE_ENV!=='production'
})
相关引用
http://vuex.vuejs.org/en/plugins.html
http://vuex.vuejs.org/en/strict.html
http://vuex.vuejs.org/en/modules.html
http://vuex.vuejs.org/en/structure.html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。