angularjs中state的参数4_mpvue中使用Vuex

Vuex的引入和使用

在使用mpvue开发小程序的过程中会遇到各种各样的组件传志问题,在mpvue和vue上使用Vuex是有区别的。

首先我们用vue/cli初始化项目时，是有提示是否使用vuex的。如果不确定自己是否安装了，可以去package.json中去查看是否有vuex。如果没有可以

npm i vuex -S

下载后,我们需要在项目中引用它,一般建议单独创建一个文件夹作为仓库.

我这个地方就把仓库建在了store目录下, 然后需要初始化一下仓库:

import Vuex from 'vuex'
import Vue from 'vue'Vue.use(Vuex)
export default new Vuex.Store({state: {show: false},mutations: {showPop(state) {state.show = !state.show}}
})

在vue中使用引入注册就好了，但是在小程序中是不行的，我们还需要写在Vued的原型上。

首先我们需要引入到mian.js文件中:

import Vue from 'vue'
import App from './App'
import store from '../static/store/store'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()

然后仓库在每个组件下都可以使用了。

使用方法和vue中一样，vuex会让组件传值变的非常简答，我们只需要用到vuex文档上写到的几个方法就可以完成我们的需求:

重点就在这个图上，围绕着数据触发事件，调用方法，仓库函数执行，再修改state的值 1. 组件有想传值的需求，触发一个事件，如果是异步就调用dispath， this.$store.dispath('showPop') 同步就可以省略这一步直接 this.$store.commit('showPop'),仓库接受函数类似，只不过一个叫actions另一个叫mutations，触发事件函数第一个参数是仓库函数的名字（生成回调函数） 2. 在actions和mutations中修改state的值。

mutations: {showPop(state) {state.show = !state.show}}

回调函数的第一个参数都是state，这也是为了方便我们修改，

仓库数据变化，所有组件的数据也对应会变化，但是有一点，如果是一些数据变了想要影响组件的弹窗开启关闭，就需要使用在对应组件中使用watch监听器了

监听器监听Vuex仓库

watch: {'$store.state.show'() {this.show = this.$store.state.show}}

这样我们就可以根据仓库对应数据改变影响组件关闭或者开启.

angularjs中state的参数4_mpvue中使用Vuex相关推荐

url中传递url参数|url中特殊字符、?、=无法解析问题
url中传递url参数|url中特殊字符&.?.=无法解析问题 1.微信小程序报错:SyntaxError: Unexpected end of JSON input 2.错误场景复现 3.错 ...
angularjs中state的参数4_一文梳理pytorch保存和重载模型参数攻略
训练过程中保存模型参数,就不怕断电了--沃资基·索德在训练完成之前,我们需要每隔一段时间保存模型当前参数值,一方面可以防止断电重跑,另一方面可以观察不同迭代次数模型的表现:在训练完成以后,我们需要保 ...
verilog中参数传递与参数定义中#的作用（二）
一.module内部有效的定义用parameter来定义一个标志符代表一个常量,称作符号常量,他可以提高程序的可读性和可维护性.parameter是参数型数据的关键字,在每一个赋值语句的右边都必须是 ...
php中post提交参数_PHP中Http协议post请求参数
这篇文章主要介绍了Http协议post请求参数的相关资料,需要的朋友可以参考下本文给大家介绍PHP中Http协议post请求参数,具体内容如下所示: WEB开发中信息基本全是在POST与GET请求与 ...
python中round函数参数_python中关于round函数的小坑
round函数很简单,对浮点数进行近似取值,保留几位小数.比如 >>> round(10.0/3, 2) 3.33 >>> round(20/7) 3 第一个参数是 ...
java中对象作为参数_java中对象引用，特别作为参数时候注意事项
1.基础知识 1Byte=8bit Byte和byte一个是对象,一个是基本数据类型而已,都是8bit 2.java中对象引用和值传递: (1).java中若一对象当作参数就是相当于,将变量对应的指向 ...
php中define的参数_php中define的用法有哪些
php中define的用法:1.[define()]函数定义一个常量:2.定义常量名称及值,代码为[define(name,value,case_insensitive)]:3.定义一个大小写敏感的常 ...
java中调用数组参数_java中如何调用带有数组类型参数的存储过程
java中如何调用带有数组类型参数的存储过程关注:95 答案:3 mip版解决时间 2021-01-28 00:39 提问者万丈深渊 2021-01-27 14:00 不知道java中java ...
python中什么是参数_Python中**和*参数有什么用
在Python中,"**"参数表示此处接受任意多个关键字参数,这些参数以字典形式保存,即会被解释为一个字典:"*"参数表示此处接受任意多个非关键字参数,这些参数 ...

angularjs中state的参数4_mpvue中使用Vuex

Vuex的引入和使用

监听器监听Vuex仓库

angularjs中state的参数4_mpvue中使用Vuex相关推荐

最新文章

热门文章