1VUE-X辅助函数用法：
Appvue内容：
<template>
<div id="app">
<h1>{{num}}</h1>
<button @click="addNumber">增加</button> |
<button @click="delNumber">减少</button> |
<button @click="ajaxfn">异步加</button> |
</div>
</template>
<script>
/ 导出vuex中的 mapState 方法/
import { mapState,mapGetters, mapMutations,mapActions} from 'vuex'
export default {
name:"App",
computed:{
/ /
mapState(['num']),
mapGetters(['getDaZhuan','getBenKe'])
},
methods: {
/ 利用mapMutations方法使用拓展运算符把Mutations的方法解构在methods中 /
/ 在this中也可以找到对应解构出来的方法 /
/ mapMutations(['ADDNUM','DELNUM']), /
/ 如果Mutations中的方法和methods中同名了,可以采用对象形式修改 /
mapMutations({
addfn:'ADDNUM',
delfn:'DELNUM'
}),
/ 类似于下面 /
/ ADDNUM:function(){}
DELNUM:function(){} /
addNumber(){
/ this$storecommit('ADDNUM',2) /
/ thisADDNUM(2) /
thisaddfn(2)
},
delNumber(){
/ this$storecommit('DELNUM',2) /
/ thisDELNUM(2) /
thisdelfn(2)
},
ADDNUM(){
consolelog(2);
},
/ 利用mapActions方法使用拓展运算符把Actions的方法解构在methods中 /
/ 在this中也可以找到对应解构出来的方法 /
/ mapActions(['addajax']), /
/ 如果Actions中的方法和methods中同名了,可以采用对象形式修改 /
mapActions({
addajax2:'addajax'
}),
ajaxfn(){
thisaddajax(5)
},
addajax(){
thisaddajax2(5)
}
},
}
</script>
<style>
</style>
store下indexjs内容：
/ import { set } from 'core-js/core/dict'; /
import Vue from 'vue'
import Vuex from 'vuex'
Vueuse(Vuex)
/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 /
/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 /
/ 导出一个Vuex实例化对象 /
export default new VuexStore({
/ state是用来存储组件中的数据的 /
state: {
msg: '我是组件共享的数据',
num: 0,
list: [{
"title": "某xxxx去了学校1",
"dec": "xxxxxxx学习了vue学习了java",
"xueli": "大专"
},
{
"title": "某xxxx去了学校2",
"dec": "xxxxxxx学习了vue学习了javaScript",
"xueli": "大专"
},
{
"title": "某xxxx去了学校3",
"dec": "xxxxxxx学习了vue学习了云计算",
"xueli": "大专"
},
{
"title": "某xxxx去了学校4",
"dec": "xxxxxxx学习了vue学习了前端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校5",
"dec": "xxxxxxx学习了vue学习了后端",
"xueli": "本科"
},
{
"title": "某xxxx去了学校6",
"dec": "xxxxxxx学习了vue学习了大数据",
"xueli": "本科"
}
]
},
/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /
/ 类似于计算属性 /
getters: {
/ 计算大专学历的数据 /
getDaZhuan: function (state) {
return statelistfilter(r => rxueli == '大专')
},
/ 计算本科学历的数据 /
getBenKe: function (state) {
return statelistfilter(r => rxueli == '本科')
},
/ 说明也具有缓存功能 如果state中的数据得到了改变
那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters
中的属性的值就不会发生改变/
getRandom:function(state){
return statenum +'--'+ Mathrandom()
}
},
/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /
mutations: {
/ 在mutations里面写异步就会造成数据混乱的问题 /
/ mutations 的方法最好大写,为了和actions方法做区分 /
/ mutations 通过payload来获取 /
ADDNUM: function (state, payload) {
consolelog('ADDNUM', state);
/ 模拟后台获取数组的异步场景 /
/ setTimeout(()=>{
statenum+=payload
},500) /
/ statenum++ /
statenum += payload
},
DELNUM: function (state, payload) {
consolelog('DELDNUM', state);
/ statenum-- /
statenum -= payload
},
},
/ actions是用来调后台接口的并commit提交一个mutations /
actions: {
/ actions里面的方法小写为了区分mutations里面的方法 /
/ 异步请求要放 actions 里面去写 不要放组件写/
addajax: function ({
commit
}, data) {
setTimeout(() => {
/ 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /
commit('ADDNUM', data)
}, 500)
},
delajax: function ({
commit
}, data) {
setTimeout(() => {
/ 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 /
commit('DELNUM', data)
}, 500)
},
},
/ 可以使用modules把vuex分模块 /
modules: {}
})
2分模块使用vuex：
appvue内容：
<template>
<div id="app">
<h1>{{$storestatemodAmodaStr}}</h1>
<h1>{{$storestatemodBmodbStr}}</h1>
<h1>{{$storegetters['modA/strGetter']}}</h1>
<button @click="changeStr">修改modaStr的值</button>
<button @click="waitchange">异步修改modaStr的值</button>
</div>
</template>
<script>
export default {
name:"App",
created(){
consolelog(this);
},
methods:{
changeStr(){
this$storecommit('modA/CHANGESTR','坚持学VUE啊')
},
waitchange(){
this$storedispatch('modA/waitfnStr','坚持学前端啊')
}
}
}
</script>
<style>
</style>
store新建modules文件创建ModAjs文件：
/ 模块的局部状态 /
/ 箭头函数如果想返回对象需要使用()包一下不能直接返回{} /
const state = ()=>({
modaStr:'我是模块A的数据'
})
/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /
/ 类似于计算属性 /
const getters= {
strGetter:function(state){
consolelog(state);
return statemodaStr + 'getter'
}
}
/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /
const mutations= {
CHANGESTR(state,payload){
statemodaStr = payload
}
}
/ actions是用来调后台接口的并commit提交一个mutations /
const actions= {
waitfnStr({commit},data){
setTimeout(()=>{
commit('CHANGESTR',data)
},1000)
}
}
/ 可以使用modules把vuex分模块 /
const modules={
}
export default {
/ 保证模块之间的数据独立运行,不互相影响 /
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
store新建modules文件创建ModBjs文件：
const state = ()=>({
modbStr:'我是模块B的数据'
})
/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /
/ 类似于计算属性 /
const getters= {
}
/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /
const mutations= {
}
/ actions是用来调后台接口的并commit提交一个mutations /
const actions= {
}
/ 可以使用modules把vuex分模块 /
const modules={
}
export default {
/ 保证模块之间的数据独立运行,不互相影响 /
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
store下indexjs文件：
/ import { set } from 'core-js/core/dict'; /
import Vue from 'vue'
import Vuex from 'vuex'
/ 先把各个模块导入进来 /
import modA from '@/store/modules/ModAjs'
import modB from '@/store/modules/ModBjs'
Vueuse(Vuex)
/ Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 /
/ 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 /
/ 导出一个Vuex实例化对象 /
export default new VuexStore({
/ state是用来存储组件中的数据的 /
state: {
},
/ getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 /
/ 类似于计算属性 /
getters: {
},
/ 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) /
mutations: {
},
/ actions是用来调后台接口的并commit提交一个mutations /
actions: {
},
/ 可以使用modules把vuex分模块 /
/ 分模块实现数据集中管理 /
/ 在 modules 中把模块名注释一下/
modules: {
modA:modA,
modB:modB
}
})
最近在学习Vuejs，把自己遇到的问题做个记录，所以，今天添加一点小笔记。
在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中
第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的
v-if
来判断请求的数据是否返回
<div
class="container"
id="app"
v-cloak>
<div
v-if='moneyInMsguuid'>
<in-account-msg
:money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
这里的
v-if
=
'moneyInMsguuid'
就是来判断数据有没有请求回来，如果请求回来就让他显示，没有请求到数据，就让他loading，这样体验就会好很多。在这里还需要注意的是，v-if判断的数据源，是数据返回的字段，如果两个字段只能存在其一的话，可以v-if
='a
||
b'
来判断数据是否成功的返回；还要注意的一点是，不能直接在组件里用v-if判断，也不能直接在根标签里判断，直接嵌套一个div就可以解决，并不影响样式，只做数据是否正常返回的显示作用；
第二个就是在使用vuex时，有数据缓存；我遇到的情况是，在列表页点击进入详情页，返回到列表页，在进入另一个详情页的时候，数据会显示之前的数据，同时页面还在loading（接口返回的数据比较慢），过一会数据返回的时候，才重新渲染页面。可能是自己对vuex理解的不够深入，没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题，但是不够zhuang,但是解决了问题，后期再做优化。
在之前解决的方案中，是进入页面的时候，重新刷新页面，重新请求数据，代码如下：
export
const
refresh
=
(title)
=>
{
documenttitle
=
title;
let
iframe
=
documentcreateElement('iframe');
iframesrc
=
require('/mmjpg');
iframesetAttribute('style',
'display:none;');
let
loadFn
=
function
()
{
iframeremoveEventListener('load',
loadFn);
documentbodyremoveChild(iframe);
consoleinfo('Page
Title
IS
'
+
title);
iframe
=
null;
loadFn
=
null;
}
documentbodyappendChild(iframe)
iframeaddEventListener('load',
loadFn);
}
但是没有达到预期的效果，依然会出现上面的情况
丫的,抓狂了（被别人催的感觉真的不爽）
百度啊，google啊，都没有遇到这种情况的？找到一个，还是提问的，没有回答的，好吧，还是靠自己。自己动手，丰衣足食啊
思路是，定义一个参数status为false，当数据没有请求回来，就不显示，也是用上面的方式来判断，一直loading（请求失败，去掉loading），当数据返回的时候，让status为true；使用$nextTick来更新数据
贴上自己部分的代码作为参考:
<template>
<div
v-if='status
&&
ordername'>
//页面展示的数据
</div>
</template>
<script>
export
default{
data(){
return
{
status：false
}
},
created(){
var
_this
=
this;
thissetDd({res
=>{
_this$nextTick(function(){
_thisstatus=
true
});
}})
},
computed:{
mapGetters({//getter获取的数据})
},
methods:{
mapActions(['setDd'])
//获取数据的方法
}
}
</script>
处理的方式比较丑陋,但是实现了想要的效果；这里注意一点就是v-if的判断问题。（v-if='status
&&
ordername'）这个用了并且，目的是有数据返回，才能让他显示，如果没有数据，会显示静态的值，数据都为underfind
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
1模块化vuex
2获取vuex中的数据
3设置vuex中的数据
4刷新之后，保留数据
数据结构
indexjs
transactionjs模块
注意：namespaced是为了解决不同模块命名冲突的问题,分两种情况来写
获取vuex中的数据
设置vuex中的数据
如果将namespaced设置为false，则需要注意命名不能重复
也可以使用mapState,mapGetters,mapActions
安装
修改indexjs配置，将数据保存到sessionStorage
Vuex 是一个专为 Vuejs 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。
state选项： 定义状态（状态就是数据）。
mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。
$store： 返回的是当前项目中的全局状态对象。
commit()方法： 用于执行指定的mutations里面的方法。
在组件中，直接通过$storestate就可以获取到全局状态对象管理的状态数据，直接渲染到页面。
state选项： 定义状态（状态就是数据）。
通过 $storestate数据名 使用。
getters选项： 定义计算属性。方法的参数是状态对象。
通过 $storegetters属性名 使用计算属性。
mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。
通过 commit() 方法，调用mutations里面的方法。
actions选项： 定义 *** 作状态的方法（这里的方法可以定义异步方法）。
注意： actions里的方法最好不要直接 *** 作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接 *** 作的是mutations。
通过 dispatch() 方法，调用actions里面定义的方法。
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。
要从私有模块中获取数据，方式是： $storestate模块名称模块的数据 。
要从私有模块中获取计算属性，方式是： $storegetters['模块名/计算属性'] 。
调用私有模块里面的mutations定义的方法，方式是： $storecommit('模块名/方法名',新值) 。
调用私有模块里面的actions定义的方法，方式是： $storedispatch('模块名/方法名',新值) 。
直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。
通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuexstore中的属性映射到vue实例身上，这样在vue实例中就能访问vuexstore中的属性了，便于 *** 作vuexstore。
如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。
如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。
注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。
如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。
如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。
注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。
以上就是关于VUE-X 辅助函数用法及分模块使用vuex全部的内容，包括:VUE-X 辅助函数用法及分模块使用vuex、解决vue2.x中数据渲染以及vuex缓存的问题、模块化vuex，获取、设置数据，及刷新保留数据方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）