1.前言
拆分 优化无止境 适合自己的层级就够了
2.目录结构
Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
1.应用层级的状态应该集中到单个 store 对象中。
2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3.异步逻辑都应该封装到 action 里面。
3. store 拆分基础
随着开发的迭代 ,需要管理的状态会越来越多
所有的状态都写到
store里面会过重,难以维护这个时候就需要拆分
基础原则是 getters 一个文件
mutaion一个文件
action一个文件
这不是绝对的 ,mutaion 的type也可以用 常量单独声明一个文件
多个项目最后合并成一个项目的话 可能还需要一层项目名
具体问题具体分析,切不可死板
4. store/index.js
这个文件主要就是引用, 整合了
// 配置Vuex // state 存储器 存储组件之间共享的资源 类似 data import Vue from 'vue' import Vuex from 'vuex' import state from './state' import {mutations,a} from './mutaions' import actions from './actions' import getters from './getters' Vue.use(Vuex) export default new Vuex.Store({ state, // 修改状态的方法 类似组件中的 methods mutations, // mutations:mut, // 类似于 mutaion actions, // 类似组件中的 computed 依赖于state创建的共享属性 // 该方法对state数据处理 getters })
5. getters.js
对比 组件的
computed
export default { test(state) { return state.todos[2] }, vipTodos(state) { return state.todos.filter(v => v.vip) } }
6. mutaions.js
载荷最好用 对象
这路的
type最好单独拆分一个 文件mutation-types.js
import { SOME_MUTATION } from './mutation-types const mutations = { modifyA(state, obj) { // console.log("ran------", arguments) state.a = obj.m }, [SOME_MUTATION] (state) { // mutate state }, increment(state, changeV = 2) { console.log("ran------", arguments) state.num += changeV }, // 模拟数据请求 reduce(state, obj) { // 不能同步刷新了 // 测试结果: // setTimeout(() => { state.num -= obj.n // }, 1000); } } // 第三种 let a = 666 export { mutations, a }
7.actions
const actions = { // 异步的递减 context 类似store对象 reduceAsync(context) { // 触发 mutaions reduce方法 setTimeout(() => { context.commit('reduce', 5) }, 1000); } } // 第二种 export default actions
或者是
const actions = { // 异步的递减 context 类似store对象 reduceAscync({commit}){ setTimeout(() => { commit('reduceSync', {num:5}) }, 1000); } } // 第二种 export default actions
