知识点1===》简单的使用vuex  进行state取值

使用yarn下载  yarn add vuex -D

vuex的包叫做 store 跟pages同级
创建store文件夹,文件夹下有store.js store.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模块中 函数不用担心会覆盖 不用担心函数会重名
导入api
import {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未看

  

01-day-vuex的使用的更多相关文章

  1. Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法

    Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...

  2. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  3. Vuex 教程案例:计数器以及列表展示

    本案例github:https://github.com/axel10/Vuex_demo-Counter-and-list 本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法. 从安装到启 ...

  4. Vuex详解笔记2

    关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便. 简单用法:在vuex 的计算属性中返回vuex 的状态 最基本的使用方式,通过 ...

  5. vuex学习及使用

    什么是vuex? 在SPA单页面组件的开发中vuex称为状态管理:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取.进行修改,并且你的修改可以得到全局的响应 ...

  6. vue:vuex详解

    一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...

  7. 【转】VueJS中学习使用Vuex详解

    转自:https://segmentfault.com/a/1190000015782272   在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解 ...

  8. vuex的使用及持久化state的方式详解

    vuex的使用及持久化state的方式详解 转载  更新时间:2018年01月23日 09:09:37   作者:baby格鲁特    我要评论 这篇文章主要介绍了vuex的使用及持久化state的方 ...

  9. Vue.js中学习使用Vuex详解

    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适:简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一 ...

  10. 数据管理工具Flux、Redux、Vuex的区别

    目录 为什么要进行数据管理? 怎么有效地进行数据管理? 数据管理工具 1. Flux 2. Redux 3. Vuex 使用数据管理工具的场景 相关资料 主要讲解一下前端为什么需要进行数据管理,有效的 ...

随机推荐

  1. echarts js报错 Cannot read property 'getAttribute' of null

    本文将为您描述如何解决 eharts.js报错 Uncaught TypeError: Cannot read property 'getAttribute' of null 的问题 根据报错信息查找 ...

  2. 简述FreeCAD在vs2017下的编译与dxf导入

    最近发现 FreeCAD 官方在发布 0.19_pre 时已提供 vs2017 x64的LibPack,现在就再来测试一下. 编译 下载 FreeCADLibs_12.1.2_x64_VC15.7z ...

  3. vue跨域

    比如 我要请求的地址是https://edu.51cto.com/center/seckill/index/get-seckill-data 首先去 config ==> index.js 添加 ...

  4. 01-Node.js学习笔记-模块成员的导出导入

    什么是Node.js Node.js是一个让javascript运行在服务端的开发平台: Node.js能做什么? 1.基于社交网络的大规模web应用: 2.命令行工具 3.交互式终端程序 4.带有图 ...

  5. 201871010102-常龙龙《面向对象程序设计(java)》第十六周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  6. AcWing 13. 找出数组中重复的数字

    习题地址 https://www.acwing.com/solution/acwing/content/2919/. 题目描述给定一个长度为 n 的整数数组 nums,数组中所有的数字都在 0∼n−1 ...

  7. git pull出错:cannot pull into a repository with state: merging_resolved"

    git pull 出错解放办法:1.尝试先提交现有代码到本地,再更新2.git reset —hard

  8. 解决SQL Server中无管理员账户权限问题

    遇到忘记SQL Server管理员账户密码或管理员账户被意外删除的情况,如何在SQL Server中添加一个新的管理员账户?按一下步骤操作可添加一个windows账户到SQL Server中,并分配数 ...

  9. [译]基于ASP.NET Core 3.0的ABP v0.21已发布

    基于ASP.NET Core 3.0的ABP v0.21已发布 在微软发布仅仅一个小时后, 基于ASP.NET Core 3.0的ABP v0.21也紧跟着发布了. v0.21没有新功能.它只是升级到 ...

  10. yii2关联表

    asArray()这个方法很好用,返回数组是1版本想要的形式,这种方式有种tp框架的感觉