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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。