知识点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. GCN 实现3 :代码解析

    1.代码结构 ├── data // 图数据 ├── inits // 初始化的一些公用函数 ├── layers // GCN层的定义 ├── metrics // 评测指标的计算 ├── mode ...

  2. 009.MongoDB分片群集部署

    一 前期准备 1.1 组件说明 MongoDB分片群集包含以下组件: shard:每个分片是分片数据的子集.从MongoDB 3.6开始,必须将分片部署为副本集. mongos:mongos充当查询路 ...

  3. MVC(基础二)

    原文链接:https://blog.csdn.net/wuzxc520/article/details/77880783 1.网站开发介绍 2.响应流程 3.MVC 介绍 4.文件夹含义

  4. WPF 精修篇 page

    原文:WPF 精修篇 page 前言 前段时间看UML 大象 这本书 虽然马上看到了精华片 最后还是暂时暂停 因为这本书 很好 但是暂时对现在的我来说 有点超前 很多东西理解起来还是很难 但是 这本书 ...

  5. DirectShow 进行视频预览和录制

    这一篇讲怎么采集摄像头图像并预览,以及录制视频到本地. 程序实现流程 这里通过使用 CaptureGraphBuilder 来简化 Graph 的创建流程. 具体流程如下: 初始化 COM 库 创建各 ...

  6. C#读取匿名对象的属性值的方法总结

    目录 1.通过反射的方式获取属性值 2.新建个扩展方法,将object转成对应的匿名对象 通过new出匿名对象,可以直接调用该匿名对象的属性名,获取属性值. var objUser = new {Na ...

  7. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 1

    如今的项目开发中,接口是很普遍的应用技术.现在好多项目组都单独设有接口开发人员.像腾讯.微博.淘宝等开放平台,其所谓的开放,就是提供一些可调用的接口,用于获取相关的信息.例如,微信用户基本信息.淘宝店 ...

  8. 13-scrapy中selenium的应用

    一. 引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们 ...

  9. Seven Kinds of Testers - 七种类型的测试

    最近读了James大叔的一篇总结Tester类型的文章,获益良多.原文叫做Seven Kinds of Testers(链接:http://www.satisfice.com/blog/archive ...

  10. 【转】linux下使用sqlplus执行包含语句块的sql文件,运行时会不断显示行号,而在plsqldev中能执行

    一.数据库:Oracle数据库 二.sql文件内容: --创建函数 CREATE OR REPLACE function fun_createuid1 return varchar2 is Resul ...