mpvue中配置vuex并持久化到本地Storage图文教程解析

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:139 发布时间:2019-07-27
摘要:1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件 #配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在newVue的时候传入store。 步骤: 2.申请成功后就可以在项

1.在小程序微信开放平台:设置 --- 第三方服务里,申请腾讯视频插件

# 配置vuex和在vue中相同,只是mpvue有一个坑,就是不能直接在new Vue的时候传入store。

图片 1

步骤:

2.申请成功后就可以在项目中使用了

1.在src目录下新建一个store目录,结构如下(官方推荐:  vuex.vuejs.org/zh-cn/struc…

具体使用步骤如下:

图片 2 

1.在项目目录src下的main.js中加入下面代码,这里代码会被编译到app.json中

  1. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上,这样在每个.vue的组件都可以通过this.$store访问store对象。
 config: {
  // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
  pages: ['^pages/index/main'],
  window: {
   backgroundTextStyle: 'light',
   navigationBarBackgroundColor: '#00B26A',
   navigationBarTitleText: 'WeChat',
   navigationBarTextStyle: 'black',
  },  
  //重点代码 
  //myPlugin 这个可以随意起,不过要和pages中的对应组件路径保持一致,version是插件版本号  provider是插件appid
  "plugins": {
   "myPlugin": {
    "version": "1.1.1",
    "provider": "wxa75efa648b60994b"
   }
  }
 },

图片 3 

2.在项目pages下任意页面 例如index下main.js

  1. ok,可以使用了。我说一下vuex官方推荐的使用方案(可适应大型应用)。

config字段中加上以下代码 注意这里的myPlugin字段 和上面的配置路径保持一致

首先在mutation-types.js中定义你的Mutation的名字

 "usingComponents": {
   "txv-video": "plugin://myPlugin/video"
  }

图片 4 

图片 5

为什么要先定义名称常量?(下图截取自vuex文档)

3.在index.vue 文件

图片 6 

template中写入以下代码 打开微信开发者工具发现视频已经开始播放了

然后在mutations.js中写处理方法

<txv-video vid="m0026z2kibn" playerid="txv1" :autoplay="true"></txv-video>

图片 7 

vid是腾讯视频的vid, 打开腾讯视频网站,打开任意视频,右键 -- 视频信息,就可以看到vid , 右键-- 复制调试信息,就可以把vid在内的视频信息复制出来。

接着在index.js中定义变量:

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:mpvue中配置vuex并持久化到本地Storage图文教程解析

关键词:

上一篇:调用腾讯API显示你当前所在城市

下一篇:没有了

最火资讯