vue---vux详解

VUEX 全局状态管理器
- 什么样的数据需要放在vuex中？
- 参数---详解
- - `state`
  - `geeters`
  - `mutations`
  - `actions`
  - `modules`
  - - 使用
    - - modules----state的使用及调用
      - modules----getters的使用及调用
      - modules----mutations的使用及调用
      - modules----actions的使用及调用
- namespaced---命名空间
- - getters有命名空间
  - mutations有命名空间
  - actions有命名空间
- 问题----如何在vuex中调用vuex中的方法或事件
- 使用映射解构的方法在组件中直接调用对应事件，数据名等

VUEX 全局状态管理器

vue的全局状态管理器
实现组件之间跨层传递数据
实现数据与视图响应式更新
state
geeters
mutations
actions
modules
namespaced----命名空间

什么样的数据需要放在vuex中？

需要多个组件使用的数据，或者方法

参数—详解

`state`

相当于vue中的data，用来存储数据的,在vue组件中获取，用 $store.state.数据名字

// 数据
state: {// 这个数据写死了goods : [{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":1,"price":899,"name":"\u5c0f\u7c73\u7535\u89c64A 32\u82f1\u5bf8","goods_id":2172700021,"select":true},{"buy_limit":1,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/65be1bac-6d3f-3766-3bac-c11b3aa13b8e.webp","num":1,"price":1199,"name":"Redmi Note 7 4GB+64GB \u68a6\u5e7b\u84dd","goods_id":2185200032,"select":true},{"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/a1\/pms_1514387870.88251945.jpg","num":1,"price":3599,"name":"\u5c0f\u7c73\u7b14\u8bb0\u672cAir 12.5  4G 128G \u94f6\u8272","goods_id":2175200001,"select":true}]
}

                     <!-- // 调用          goods，就是数据名字-->
<div class="good" v-for="good in $store.state.goods" :key="good.goods_id">

`geeters`

- `getters 从现有数据获取到新的数据`，相当于vue组件中的`computed`
- `名字 : state => { 逻辑。。。 ; return 数据}`
- 在vue组件中获取：`$store.gettes.数据名字`

// 使用
getters : {goodNum : state => {let num = 0;state.goods.forEach( item => {num += item.num;})return num;}
},

                     <!-- 调用       goodNum就是已经计算过的数据名字   --><van-tabbar-item to="/cart" icon="setting-o" :badge="$store.getters.goodNum">

`mutations`

mutations 方法，操作数据，相当于vue组件中的methods
在vue组件中使用方法：$store.commit("传过来的事件名字",需要传递的参数);

// 使用
mutations: {// delGood事件名字，(state,good),state:对应state中的数据，good:对应组件传递过来的参数delGoodVuex(state,good) {var flag = window.confirm("你确定要删除码？");if(flag) {var index = state.goods.indexOf(good);state.goods.splice(index,1);}
},

// 调用
// delGood 是vue中的事件，
delGood() {// this.$store.commit 就是接收，vuex中的事件delGoodVuex，且传递参数this.good.num，this.$store.commit("delGoodVuex",this.good.num);
},

`actions`

关于Ajax异步的方法需要放在actions中，执行异步的方法
actions 方法，可以执行异步操作方法，相当于vue组件中的methods
在vue组件中使用：$store.dispatch("方法名字",data);
使用：方法名字({commit},[参数]) { ajax方法};

actions: {// 解构mutations中的所有方法getCart({commit}) {getCartAPI().then( res => {// 已经结构了vuex中的mutations中的方法，// 所以调用初始化购物车的方法只需要：commit("方法名字",需要传输过来的数据)；// 这里是因为调用了vuex本身的事件方法，所以使用此写法// 因为commit 是已经解构的方法，所以只需正确的找到需要的方法就行了，如果传参，就写参数commit("INIT_CART",res.data);}).catch( err => {console.log(err);})}
},
mutations : {// 初始化购物车的方法INIT_CART(state,goods) {state.goods = goods;}
}

调用actions中的方法时
$store.dispatch("方法名字");
方法名字：就是在actions中定义的方法的名字

// 调用actions的方法
// 在vue中调用vuex的actions中的方法
this.$store.dispatch("getCart");

`modules`

模块
Vuex允许将store分割成模块(module)
每一个模块都有vuex中的所有方法，state，mutations，actions，getters

使用

在store文件夹下，创建modules文件夹，在其下在创建对应的vuex模块：比如：登录模块的login.js

// 登录模块的state
const state = {}
// 登录模块的getters
const getters = {}
// 登录模块的mutations
const mutations = {}
// 登录模块的actions
const actions = {}
// 导出默认的模块方法
export default {state,getters,mutations,actions}

需要将模块导入vuex中，在注册

// 导入 login模块
import login from './modules/Login.js'
// 注册到vuex中
modules : {login
}

modules----state的使用及调用

state就是存储数据的
modules中的state是每个模块私有的，有命名空间
调用使用：$store.state.注册的模块名.参数等

// 使用，存储数据
const state = {name : "momo",age : 20
}

<!-- 调用 --><!-- 获取vuex登录模块中的名字，年龄 -->
<p>获取vuex中的模块数据 {{$store.state.login.name}}----{{$store.state.login.age}}</p>

modules----getters的使用及调用

对应的方法有三个参数，且它不是私有，默认没有命名空间
参数1：state 自己这个模块的state
参数2：getters 全局的getters，包括模块的getters
参数3：rootState 全局的state

// 使用
const getters = {<!-- 参数1，参数2，参数3，参考以上 -->getGoods(state,getters,rootState){console.log(state,getters,rootState)return getters.goodNum;}
}

getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据
$store.getters.模块中的getters中的数据名字

<!--    getters没有命名空间所以直接访问vuex中的gettser就可以访问到模块中的数据 -->
<p>getter:{{$store.getters.getGoods}}</p>

modules----mutations的使用及调用

与vue中的正常使用一样
模块中的mutations也是没有命名空间的，所以也可以直接使用
vuex中的调用mutations的方法进行调用
$store.commit("需要调用的模块中的方法名字",需要传递的参数)

// 使用
const mutations = {ADD_AGE(state,step=1) {state.age += step;}
}

调用
$store.commit("需要调用的模块中的方法名字",需要传递的参数)

<!-- 调用 --><!-- 调用模块方法数据 -->
<button @click="$store.commit('ADD_AGE')">年龄加</button>

modules----actions的使用及调用

用法与vuex中的差不多
其中vuex中的{commit}解构vuex中的方法，模块中的{context},得到上下文中的所有方法
具体情况可以自行打印查看
方法名字({context},[参数]) { 逻辑 }

// 使用
const actions = {addAge(context,arg){// 这个是调用上下文中定义mutations的ADD_AGE事件context.commit("ADD_AGE",arg);var good = {"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg","num":2,"price":8990,"name":"小米55","goods_id":2172700028,"select":true};console.log(context);// 模块访问vuex中全局的方法context.commit("addGood",good);// 模块可以访问vuex全局的statecontext.rootState.goods.pop();}
}

因为没有命名空间，所以可以直接使用vuex的调用方法进行调用
$store.dispatch('需要调用的模块的actions方法')

<!-- 调用 --><!--  -->
<button @click="$store.dispatch('addAge')">actions年龄减</button>

namespaced—命名空间

namespaced : true/false
true：打开命名空间
false：反之
在导出的时候添加模块的命名空间

// 导出
export default {// 命名空间namespaced : true,state,getters,mutations,actions
}

getters有命名空间

参数：数据名字(state,getters,rootState,rootGetters) {逻辑; return 数据}
访问：$store.getters["模块名字/数据名字"];
映射方法：...mapGetters["模块名字/数据名字"]

mutations有命名空间

参数：方法名字(state,参数);
访问：$store.commit("模块名字/方法名字",需要传递的数据参数)
映射方法：...mapMutations["模块名字/数据名字"]

actions有命名空间

参数：方法名字({dispatch,commit,getters,rootGetters},参数);
参数：方法名字(context,参数);
访问：$store.dispatch("模块名字/方法名字",需要传递的数据参数)
映射方法：...mapDispatch["模块名字/数据名字"]

问题----如何在vuex中调用vuex中的方法或事件

使用：this.commit("需要调用的方法")

使用映射解构的方法在组件中直接调用对应事件，数据名等

那个组件使用那个vuex中的属性就导入对应的映射方法
映射方法对应：mapState,mapGetters,mapMutations,mapActions
导入方法：import {对应的映射方法} from 'vuex';
使用方法：...对应的映射方法(['需要调用的vuex的方法，或者数据'])
原因：这样可以不用在写，$store.state.数据名等这种
vuex中getters 映射成vue中的computed 就是对应的使用方法需要在对用映射成的vue的方法中才能使用
vuex中的actions ，映射成vue中的methds
需要使用时，就跟使用vue中的数据，方法一样

// 导入映射的vuex的方法// vuex中getters 映射成vue中的computed// vuex中的actions ，映射成vue中的methds
import {mapGetters,mapActions} from 'vuex';
import Bus from '@/utils/Bus.js';
export default{data(){return {isShow:true,active : 0}},computed : {...mapGetters(['goodNum'])},created(){// 因为有了映射的方法，我们就不用再使用dispatch这种了// this.$store.dispatch("getCart");this.getCart();},methods : {...mapActions(["getCart"])}
}

vue---vux详解相关推荐

七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
八、Vue cli3详解学习笔记
一.认识Vue CLI3 1.1 vue-cli 3 与 2 版本有很大区别: vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 ...
05Vue.js快速入门-Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

vue---vux详解

vue---vux详解

VUEX 全局状态管理器

什么样的数据需要放在vuex中？

参数—详解

`state`

`geeters`

`mutations`

`actions`

`modules`

使用

modules----state的使用及调用

modules----getters的使用及调用

modules----mutations的使用及调用

modules----actions的使用及调用

namespaced—命名空间

getters有命名空间

mutations有命名空间

actions有命名空间

问题----如何在vuex中调用vuex中的方法或事件

使用映射解构的方法在组件中直接调用对应事件，数据名等

vue---vux详解相关推荐

最新文章

热门文章