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
}
})
效果图：
