VUE-X 辅助函数用法及分模块使用vuex
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE-X 辅助函数用法及分模块使用vuex相关的知识，希望对你有一定的参考价值。
参考技术A 1.VUE-X辅助函数用法：App.vue内容：
<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.$store.commit('ADDNUM',2) */
/* this.ADDNUM(2) */
this.addfn(2)
,
delNumber()
/* this.$store.commit('DELNUM',2) */
/* this.DELNUM(2) */
this.delfn(2)
,
ADDNUM()
console.log(2);
,
/* 利用mapActions方法使用拓展运算符把Actions的方法解构在methods中 */
/* 在this中也可以找到对应解构出来的方法 */
/* ...mapActions(['addajax']), */
/* 如果Actions中的方法和methods中同名了,可以采用对象形式修改 */
...mapActions(
addajax2:'addajax'
),
ajaxfn()
this.addajax(5)
,
addajax()
this.addajax2(5)
,
</script>
<style>
</style>
store下index.js内容：
/* import set from 'core-js/core/dict'; */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store(
/* 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 state.list.filter(r => r.xueli == '大专')
,
/* 计算本科学历的数据 */
getBenKe: function (state)
return state.list.filter(r => r.xueli == '本科')
,
/* 说明也具有缓存功能 如果state中的数据得到了改变
那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters
中的属性的值就不会发生改变*/
getRandom:function(state)
return state.num +'--'+ Math.random()
,
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations:
/* 在mutations里面写异步就会造成数据混乱的问题 */
/* mutations 的方法最好大写,为了和actions方法做区分 */
/* mutations 通过payload来获取 */
ADDNUM: function (state, payload)
console.log('ADDNUM', state);
/* 模拟后台获取数组的异步场景 */
/* setTimeout(()=>
state.num+=payload
,500) */
/* state.num++ */
state.num += payload
,
DELNUM: function (state, payload)
console.log('DELDNUM', state);
/* state.num-- */
state.num -= 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：
app.vue内容：
<template>
<div id="app">
<h1>$store.state.modA.modaStr</h1>
<h1>$store.state.modB.modbStr</h1>
<h1>$store.getters['modA/strGetter']</h1>
<button @click="changeStr">修改modaStr的值</button>
<button @click="waitchange">异步修改modaStr的值</button>
</div>
</template>
<script>
export default
name:"App",
created()
console.log(this);
,
methods:
changeStr()
this.$store.commit('modA/CHANGESTR','坚持学VUE啊')
,
waitchange()
this.$store.dispatch('modA/waitfnStr','坚持学前端啊')
</script>
<style>
</style>
store新建modules文件创建ModA.js文件：
/* 模块的局部状态 */
/* 箭头函数如果想返回对象需要使用()包一下不能直接返回 */
const state = ()=>(
modaStr:'我是模块A的数据'
)
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
const getters=
strGetter:function(state)
console.log(state);
return state.modaStr + 'getter'
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
const mutations=
CHANGESTR(state,payload)
state.modaStr = 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文件创建ModB.js文件：
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下index.js文件：
/* import set from 'core-js/core/dict'; */
import Vue from 'vue'
import Vuex from 'vuex'
/* 先把各个模块导入进来 */
import modA from '@/store/modules/ModA.js'
import modB from '@/store/modules/ModB.js'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store(
/* state是用来存储组件中的数据的 */
state:
,
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
getters:
,
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations:
,
/* actions是用来调后台接口的并commit提交一个mutations */
actions:
,
/* 可以使用modules把vuex分模块 */
/* 分模块实现数据集中管理 */
/* 在 modules 中把模块名注释一下*/
modules:
modA:modA,
modB:modB
)
以上是关于VUE-X 辅助函数用法及分模块使用vuex的主要内容，如果未能解决你的问题，请参考以下文章
vuex中的模块化(modules)和命名空间(namespaced)，以及四个辅助函数