Vue的状态大管家

{// V'Vuex// 13  如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存// Vue的状态大管家"Print to console": {"prefix": "V'Vuex","body": ["// 位置：./store/index.js","// 1,引入插件","import Vue from \"vue\"","import Vuex from \"vuex\"","","// 2，安装插件","Vue.use(Vuex);","","// 3，创建对象","const store = new Vuex.Store({","    //【state:状态】------ ----- ---- ---【state:状态】 --- ---- ----- ------ 【state:状态】","    state: {//状态","        num: 18","        , students: [","            {","                name: \"小白\",","                age: 11","            }","            , {","                name: \"小黑\",","                age: 22","            }","            , {","                name: \"小红\",","                age: 33","            }","        ]","    }","    //【mutations:改变状态】------ ----- ---- ---【mutations:改变状态】 --- ---- ----- ------ 【mutations:改变状态】","    , mutations: {//改变状态的方法，其中的每个方法默认传入state","        // 被所有组件调用唯一方式：this.$store.commit(\"change_num\"[,对象参数])","        // 一般要先初始化再使用，但也可以用Vue.set(对象,键,值)方法响应式添加属性，Vue.delete(对象,属性名)响应式删除对象属性","        change_num() {","            state.num++;","        },","        aUpdateInfo() {","            state.students[0].name = \"老王\"","        }","    }","    , actions: {//有异步操作的方法，其中的方法默认传入context（上下文，环境，语境）","        // 被所有组件调用唯一方式：this.$store.disqatch(\"change_num\"[,对象参数])","        aUpdateInfo(context) {","            // 有时完成异步后可以用Promis回调.then()","            return new Promise((resolve, reject) => {","                setTimeout(() => {","                    context.commit(\"updateInfo\")","                }, 1000);","            })","        }","    }","    //【getters:计算属性】------ ----- ---- ---【getters:计算属性】 --- ---- ----- ------ 【getters:计算属性】","    , getters: {//计算属性，对状态需要处理后的数据","        // 被组件使用：$store.getters.more20stu","        more20stu(state) {","            return state.students.filter(n => n.age > 20);","        }","        , more20stu(state, getters) {//第二个参数固定为getters","            return getters.more20stu.length;","        }","        , more20stu(state) {","            return function name(age) {//需要其它参数时可返回成一个函数","                return state.students.filter(n => n.age > age);","            }","        }","    }","    //【modules:子管家模块】------ ----- ---- ---【modules:子管家模块】 --- ---- ----- ------ 【modules:子管家模块】","    , modules: {//相当于大管家的子管家,子管家有自己的独立作用域,它保存在大管家的state中，","        // 被.vue组件调用小仓库:this.$store.state.mod_a.age","        // 而其它属性同大管家一样调用 this.$store.commit(\"change_age_2\"[,对象参数])","        mod_a: {","            state: {","                age: 10","            }","            , mutations: {","                change_age_2() {","                    state.age++;","                }","            }","            , actions: {}","            , getters: {} // 默认传入context，contxt.rootGetters可访问大管家的getters,同理context.rootState也是","        },","        mod_b: {","","        }","    }","});","","// 最后，导出到main.js然后注册","export default store;","","// 补充：对象的解构","//  const {name ,heigth ,age} = obj // 定义常量name,heigth,age分别取出对象中对应属性值 ",],"description": "Vue的状态大管家"}
}

@沉木

VSCode自定义代码片段13——Vue的状态大管家相关推荐

VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
VSCode自定义代码片段11——vue路由的配置
vue路由的配置 {// v'router// 11 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 ...
VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
vscode自定义代码片段（新手交流）
一.为什么要用js代码片段运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
VSCode自定义代码片段6——CSS选择器
CSS选择器自定义代码片段 { // CSS'selector // 6 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 新建全局代码片段文件... = ...
VSCode自定义代码片段4——cli的终端命令大全
cli的终端命令大全 {// cli'command// 4 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义 ...
VSCode自定义代码片段3——url大全
url大全 {// url'// 3 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名称 =>编辑 ...
VSCode自定义代码片段5——HTML元素结构
HTML元素结构 {// HTML'element// 5 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片 ...
VSCode自定义代码片段7——CSS动画
CSS动画 {// CSS'animation// 7 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... =>自定义片段名 ...

VSCode自定义代码片段13——Vue的状态大管家

Vue的状态大管家

@沉木

VSCode自定义代码片段13——Vue的状态大管家相关推荐

最新文章

热门文章