小程序vuex调试（vue3微信小程序）
华为云服务器特价优惠火热进行中！ 2核2G2兆仅需 38 元；4核4G3兆仅需 79 元。购买时间越长越优惠！更多配置及优惠价格请咨询客服。
合作流程： |
本篇文章给大家谈谈小程序vuex调试，以及vue3微信小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
微信号：cloud7591如需了解更多，欢迎添加客服微信咨询。
复制微信号
本文目录一览：
VUE-X 辅助函数用法及分模块使用vuex
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
}
})
什么是 Vuex ？它是做什么的
Vuex 是Vue的一种状态管理模式，专门为Vue设计的，集中式组件管理状态，我们通常不会这么做，通常使用的是子父传值，父子传值，兄弟传值，父直接用子，子直接用父，当组件之间的传值满足不了需求，来自不同视图需要变更同一个状态，会使用状态管理器，通俗的来讲就是你觉得你现有的功能满足不了项目需求，需要使用那么就使用，如果不需要使用那么就不使用，使用它并没有绝对的条件。
Vuex 使用 单一状态树 ——是的，用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
store 中的状态的唯一提交方法
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
vuex基础总结
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。
上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据
多个组件共享数据或者是跨组件传递数据时
然后在组件中就可以通过this.$store访问到vuex了
state作为唯一的数据源，所有的共享数据都存放在state中，如：
vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象
（1）触发mutation的方法
这次是在组件的methods中，将mutation映射成methods的方法
（2）mutation传值（官网将传递的值称为载荷）
对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据
还可以写成一种对象的方式
mapMutations传值
（3）注意
actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this.$store.dispatch('方法名')
比如定义一个定时器异步的使count自增
而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了
组件中访问getters中的属性
其实和state差不多，就不多说了
下一节：vuex模块化
【uni-app】Vuex介绍和使用
无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装
uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制
globalData 是简单的全局变量，如果使用状态管理，请使用 vuex
项目文件结构
1.在 main.js 中导入store文件。
2.组装模块并导出 store
3.定义cart.js模块(这里以购物车为例)
4.定义根级别的getters
5.使用
查看下效果
点击添加按钮
Vuex简单使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。
state选项： 定义状态（状态就是数据）。
mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。
$store： 返回的是当前项目中的全局状态对象。
commit()方法： 用于执行指定的mutations里面的方法。
在组件中，直接通过$store.state就可以获取到全局状态对象管理的状态数据，直接渲染到页面。
state选项： 定义状态（状态就是数据）。
通过 $store.state.数据名 使用。
getters选项： 定义计算属性。方法的参数是状态对象。
通过 $store.getters.属性名 使用计算属性。
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全部注册到私有命名空间中。
要从私有模块中获取数据，方式是： $store.state.模块名称.模块的数据 。
要从私有模块中获取计算属性，方式是： $store.getters['模块名/计算属性'] 。
调用私有模块里面的mutations定义的方法，方式是： $store.commit('模块名/方法名',新值) 。
调用私有模块里面的actions定义的方法，方式是： $store.dispatch('模块名/方法名',新值) 。
直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。
通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，便于操作vuex.store。
如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。
如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。
注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。
如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。
如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。
注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。
小程序vuex调试的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue3微信小程序、小程序vuex调试的信息别忘了在本站进行查找喔。
