本文共 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/