博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
01-day-vuex的使用
阅读量:740 次
发布时间:2019-03-22

本文共 6783 字,大约阅读时间需要 22 分钟。

知识点1===》简单的使用vuex  进行state取值使用yarn下载  yarn add vuex -Dvuex的包叫做 store 跟pages同级 创建store文件夹,文件夹下有store.jsstore.js文件如下{    // Vuex 仓库文件(入口)    import Vue from 'vue'    import Vuex from 'vuex'    //全局注册    Vue.use(Vuex)    // 创建一个状态厂库  并且将它暴露出去 export default    const store=new Vuex.Store({        state: {            test: "ceshi",          },    })    console.log(store.state.test)  //在控制台输出 ceshi  可能在编译器会报错    export default store}  然后在main.js引入改文件store.js  import store from "./store/store";  最后注释掉  目的在控制台好单独观察   render: h => h(App) 即如下 new Vue({  router,}).$mount("#app");

  

----------------------------------------------知识点2==》简单的使用vuex  对state进行修改值使用mutations   store.commit("changeName"); 进行提交{    import Vue from 'vue'   import Vuex from 'vuex'    Vue.use(Vuex)    // 创建一个状态厂库  并且将它暴露出去 export default    const store=new Vuex.Store({        state: {            test: "ceshi",          },                // 通过mutation去改变state中的值,它是改变state值(状态的)的唯一方式  mutation是同步的         mutations: {            changeName(state) {                state.test = "哈哈 我不是test"             }        }    })    // 放肆一 通过 store.commit()的方式去提交mutation,    store.commit("changeName");    console.log(store.state.test) //在控制台输出 “哈哈 我不是test”  可能在编译器会报错    export default store}
-------------------------------------------------知识点3==》简单的使用vuex  对state进行动态修改值 知识点2其他的不变改变mutations 语句块  和 store.commit       // 再传递一个参数,用来动态修改值 zhi    mutations: {        changeName(state,zhi) {            state.test = zhi          }    }   // 放肆一 通过 store.commit()的方式去提交mutation,   store.commit("changeName","动态修正值,我不是哈哈");   console.log(store.state.test) //在控制台输出 “动态修正值,我不是哈哈”  可能在编译器会报错
---------------------------------------------------知识点4==》 如果 store.commit()传递的参数不止2个 那怎么办  知识点2其他的不变改变mutations 语句块  和 store.commit 第2个参数使用对象的形式   mutations: {        changeName(state,obj) {            state.test = obj.x          }    }   //  第二个参数使用一个对象那个的形式代替   store.commit("changeName",{v:"我是vvvvvvvvv", x:"我是xxxxxxxxx"});   console.log(store.state.test) //在控制台输出 “我是xxxxxxxxx”  可能在编译器会报错

  

----------------------------------------------------知识点5===》 提交mutations   store.commit()的另外一种方式store.commit整个帝乡传递给第二个参数 obj mutations: {        changeName(state,obj) {            state.test = obj.val          }    }store.commit({    type: "changeName",  //这里是mutation的名字    val: 10,    sex: "男",    newName: "王五"});    console.log(store.state.test) //输出10
----------------------------------------知识点6==》  action的基本使用   store.dispatch去调用 action  {    // Vuex 仓库文件(入口)    import Vue from 'vue'   import Vuex from 'vuex'   Vue.use(Vuex)    // 创建一个状态厂库  并且将它暴露出去 export default    const store=new Vuex.Store({        state: {            test: "ceshi",              datalist:[], //add        },        mutations: {            changeName(state,obj) {                state.test = obj.val              }        },                // 每一个action都会接收一个参数,这个参数可以提交mutation(  context.commit( ) )        actions:{            initDatalist(context,obj){                console.log(context);  //输出为 {dispatch: ƒ, commit: ƒ, getters: {…}, state: {…}}                console.log(obj);      // 我是哈哈            }         }    })    store.commit({        type: "changeName",  //这里是mutation的名字        val: 10,        sex: "男",        newName: "王五"    });    // 调用action,使用store.dispatch就可以出发一个action 同样调用有两种形式     // 1 第二个参数数对象   2整个都是对象的形式    store.dispatch({        type:"initDatalist",        val:"我是哈哈"    })    export default store }    千万不能  虽然在控制台可以看见state中有值   但是我们不能直接通过这样的形式去修改   .state.属性=“值”  之所以我们能够看见  是因为别人是为了我们可以看见  方便调试
------------------------------------------知识点7==》  action 模块与 mutations模块中 函数不用担心会覆盖  不用担心函数会重名导入apiimport {getGoodsInfo} from "../apis/api"{        // Vuex 仓库文件(入口)  import Vue from 'vue'  import Vuex from 'vuex'   Vue.use(Vuex)    import {getGoodsInfo} from "../apis/api"    // 创建一个状态厂库  并且将它暴露出去 export default    const store=new Vuex.Store({        state: {            test: "ceshi",              datalist:[],        },                mutations: {            initDatalist(state, obj) {                state.datalist = obj.list;//赋值哦            }        },                //每一个action都会接收一个参数,这个参数可以提交mutation(  context.commit( ) )        actions:{        async initDatalist(context,obj){            //  发送一步请求 拿到数据              let res= await  getGoodsInfo()            console.log(res.data.data)            context.commit({                type: "initDatalist", //去调用mutations中的initDatalist                list: res.data.data            })            }         }    })    // 调用action,使用store.dispatch就可以出发一个action 同样调用有两种形式     // 1 第二个参数数对象   2整个都是对象的形式    store.dispatch({        type:"initDatalist",        val:"我是哈哈"    })    console.log(store.state.datalist)     //我我们发现这里并没有输出几个数组的值    // 因为是axios 是一步需求  此时还没有它去取值时  请求还没有拿到值    // action: 通知,可以进行任何异步操作,action不能直接改变state,只能提交一个mutation让它去改变状态    // 如果有异步请求获取数据,应该先发送action,在action内处理完异步,并拿到数据以后,在commit一个mutation    export default store}
知识点8===》getter: 计算属性(同computed),会进行结果缓存,只要母体数据不发生变化,则不会重新计算!getter:的基本用法  跟另外几个属性同级  getters:{        getMale(){            return "getters必须返回一个值"        }   }      //取值,和computed一样,直接调用属性即可,不用加括号!!!!   console.log(store.getters.getMale) //输出getters必须返回一个值
知识点9===》getters过滤值  过滤掉女生  {              // Vuex 仓库文件(入口)        import Vue from 'vue'     import Vuex from 'vuex'     Vue.use(Vuex)        // 创建一个状态厂库  并且将它暴露出去 export default        const store=new Vuex.Store({            state: {                test: "ceshi",                  datalist:[],                emplist: [                    { name: "zs", sex: "男" },                    { name: "zs1", sex: "男" },                    { name: "zs2", sex: "女" },                    { name: "zs3", sex: "女" },                    { name: "zs4", sex: "男" }                ] //add            },                        mutations: {                initDatalist(state, obj) {                    state.datalist = obj.list;//赋值哦                }            },                        getters:{                getMale(state){ //是上面各个state                let arr=[];                for(let obj of state.emplist){                    if(obj.sex=="男"){                        arr.push(obj);                    }                   }                 return arr; // getters 必须返回一个值                }            }        })        //取值,和computed一样,直接调用属性即可,不用加括号!!!!        console.log(store.getters.getMale) // 放回过滤后的值        export default store     }
知识点10==》filter的使用  与vuex无关如果retuen true  则把当前的值放入新数组如果retuen false  则不会把 当前的值放入新数组    let arr=[1,2,3,4,5,6,7,8];         let newarr=arr.filter(val=>{             if(val%2==0){                 return true             }else{                 return false             }         })         console.log(newarr) //输出【2,4,6,8】09-核心概念,module未看

  

转载地址:http://klwwk.baihongyu.com/

你可能感兴趣的文章