PLM之家精品课程培训,联系电话:18301858168 QQ: 939801026

  • NX二次开培训

    NX二次开培训

    适合初级入门或想深入了解二次开发的工程师,本培训结合ufun,NXOpen C++,大量的实例及官方内部的开发技术对于老鸟也值得借鉴!.

    NX CAM二次开发培训报名 NX二次开发基础培训报名
  • PLM之家Catia CAA二次开发培训

    Catia二次开发培训

    Catia二次开发的市场大,这方面开发人才少,难度大。所以只要你掌握了开发,那么潜力巨大,随着时间的积累,你必将有所用武之地!

  • PLM之Teamcenter最佳学习方案

    Teamcenter培训

    用户应用基础培训,管理员基础培训,管理员高级培训,二次开发培训应有尽有,只要你感兴趣肯学习,专业多年经验大师级打造!

  • PLM之Tecnomatix制造领域培训

    Tecnomatix培训

    想了解制造领域数字化吗?想了解工厂,生产线设计吗?数字化双胞胎,工业4.0吗?我们的课程虚位以待!

PLM之家PLMHome-国产软件践行者

[前端框架] Vuex 的用法详解

[复制链接]

2019-6-12 15:28:01 1894 1

admin 发表于 2019-6-12 15:24:50 |阅读模式

admin 楼主

2019-6-12 15:24:50

请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!

您需要 登录 才可以下载或查看,没有账号?注册

x
Vuex 的用法详解: t- }- @3 l, _7 n
+ g4 H; Q) W5 |5 M9 q# l
本案例测试下Vuex的使用,创建一个新的web项目
* e$ c0 d" a- t3 f8 i2 R! z- qVue init webpack web) m; s5 _+ n+ u' N0 |. a  S
安装vuex; x3 l2 I/ }& [0 ~4 c( B" U3 {! D
npm install vuex --save3 i+ M3 m/ x2 [( h# Z0 e
启动, npm run dev,打开localhost:8080  即可! R1 r% X4 R, X' w( p5 W
' q3 ]2 g$ e) W$ J- v6 D
  X9 n7 c( j7 S# i
(1)引入vuex$ {' e( e9 S, H; N5 ~
创建一个src/store文件夹,创建index.js , 引入并导出store  T0 L' y4 F. p
import Vue from 'vue'
& R1 G# U3 Y( X% F& c  i$ Jimport Vuex from 'vuex'
; Z" @9 X; N/ A) A* \9 bVue.use(Vuex);/ a$ A. a/ e* D: \: j6 c
const store = new Vuex.Store({$ S; T- H9 I9 m5 S8 q4 R
})
! x+ ?; T6 L6 @- Uexport default store;: Q0 k. m7 s7 R2 y: L/ P) I

9 a; t# [3 r7 T8 E(2)引入store到main.js
; }) D8 n1 j9 j# Z( B2 y! Simport Vue from 'vue'
) @$ `/ k' d. Z& O8 Yimport App from './App'
: m2 o5 L7 v4 A7 Oimport store from './store'
2 k4 v# |) O/ i# T: X0 V+ c" E
) Y; u8 P+ k/ F9 U+ ~! F: sVue.config.productionTip = false
( ^2 {. j3 |4 C6 |7 K( ~* q1 ~/ K$ y. `# b( Q; ]+ T
/* eslint-disable no-new */
0 ~. K: N( {! }, Z5 V% f5 Unew Vue({$ g- A3 _7 a/ [) M) j8 ?
  el: '#app',9 T+ h( k- A9 n% u) n
  store,+ M2 y# `# p4 P, x
  components: { App },5 l+ J2 M% o; t9 F: x
  template: '<App/>'0 L% h4 N! k+ g+ _5 P0 V
})
3 \) _' Y5 i! c- ~# f: F& V) l4 ~) y9 w; j% C8 I+ n' i

# A  M+ ^! k# X
7 S% |# _3 ~: {; g( b
(3) 修改 helloword.vue ,先使用state获取值进行测试# h+ b) R) ]1 d# @
State: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;
+ ^/ }* |  F, E( |  a6 R3 V7 Qconst store = new Vuex.Store({0 L: \- I) M3 L9 G* _5 [
  state: {
5 u2 F! U9 S* ?7 s: o      count:1
6 B" q8 b" r4 p  ?  }3 v  O+ n. _  `: [: ^1 w" B
})
0 H+ ]4 D9 X3 X
2 {) W# b- Q. M3 D7 ^helloword.vue----# m$ l. D1 T+ z4 `! g1 \8 A
<template>
7 v# ~0 K! Q+ |1 ?- w  <div class="hello">7 U1 ?: G1 i8 ?3 u. ~' u" y# r! i

; {" h, [* `9 }  g/ e    <h2>{{this.$store.state.count}}</h2>6 Y' J7 i# C. P# c  q

$ P4 F4 y7 K. z9 y/ u8 Q5 O  </div>$ F" V) A- l0 J
</template>2 Q6 w4 o& l1 M& A

+ b9 g* z1 q/ Q3 H% p9 K! @
; C+ @( O+ Q/ v1 |
显示结果为: 1 0 F% {( |* A& v

' J% q, Q3 N# O+ k' F" p+ p+ e

' _- P2 P: a: ^* B5 K2 c(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:! k% [+ D% c9 N1 j- t

% e0 l" D2 A& C4 \7 T/ ]const store = new Vuex.Store({
1 \0 S+ Y& z7 P) S0 j  state: {9 w. T7 A* k! m' N1 V: j& O7 r4 g; w
      count:1
# ^9 E( Y  K" F* ?2 q5 ^1 @  },
( X( @8 ~5 O: D* J7 {* a  getters:{6 }1 j7 x2 Z+ x5 a9 J" e8 E( _
      getStateCount:state=>{
( D) K8 e  l1 E0 s          return state.count + 1;
, ?5 }: I, T! d! Y8 k  c( m      }
, ~( S9 O( N! V& l& k5 x. {  }1 U( m! |& d9 V5 c: Y: \. F
})% r5 E  y& @8 G: U. |

# D0 D- ?' X6 r! P9 m( m; r+ ]+ \3 U2 A<template>
. F3 C: D7 ?+ _' X  <div class="hello">
# O$ `1 ?% W) b% S8 G3 T# x5 k$ L0 Q, Q( t
    <h2>StateValue: {{this.$store.state.count}}</h2>
- y4 ?" L% M( b! q% f. G6 ]3 E     <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
, `6 P( p) k! x& J2 t( L  </div>
' |$ r5 Z3 y: A2 s! s% n</template>) O6 ]% R. o/ a1 [+ q
; K) C/ a8 p, `/ a) |* A

1 a( w+ X% `, `9 J5 O" b- V显示结果:- y- R& Q5 C/ w/ Y. X
StateValue: 1GettesVaule: 2
# F- z  I8 G+ B% J. S
$ I( c- j; o3 n6 t1 A( K(5)# x9 W% y; v+ m5 T& q+ b  \0 m

Mutations:

数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,我们现在Hello World.vue文件中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值:


7 f. }' C/ {* [5 h' x8 A2 w- N修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:
% X& J2 r; i- t( D; G( P6 imutations:{% x& ^0 E* b1 U' w- q
      add(state){, I& \4 k- N2 ~3 \+ ^& ?" U* ?
         state.count = state.count + 1;
  Q7 L; d" `1 u$ V. U      },2 a% y; d2 @) `% F3 V2 |7 U
      reduce(state){' X9 ?; l4 T# h; F5 V6 K
        state.count = state.count - 1;
# U6 I4 x5 c7 S. b) H' q    }
6 i# U0 v" b2 |1 Z& ~  }
6 d0 b- D' Z* p- X<template>& o# v: _+ T4 i+ t# U
  <div class="hello">- H3 Y; u; |3 d
    <h1>Actions:</h1>
7 U8 }* t: a4 c* u6 D    <el-button type="primary" @click="addFunc()">Add</el-button>
  m8 j( Q+ k! I+ [    <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>
* f' {5 k3 t# M9 P# q! r& H    <h2>StateValue: {{this.$store.state.count}}</h2>8 L, C+ j+ C, P9 c0 s% F, o
    <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
1 k; ?* |8 W: U5 a( q- g& p) ]1 k  </div>
! P1 n$ ~. n" f3 K* t</template>7 R' P  a) E3 h! S: K( ]! ^. r& o8 J
$ I6 y8 \0 H! _0 i
5 ]9 ~! q; \) V5 g  k* i  W+ H& p
结果:9 E" F6 ], [9 f8 f, x
0 ]8 C, {* D5 _

$ o7 t. t$ [  P7 U+ y7 iActions:Add
ReduceStateValue: 5GettesVaule: 6
$ u  t  z; m; v" y" o- a
( `  w9 m; k/ P
; Q+ j  l/ V9 q
# ^! t/ \$ k6 \6 g7 l/ e+ O+ _

1 D. ]0 W9 q5 t5 x
# w8 `! k: M  l8 n3 x/ C6 u* q
5 i- [9 u2 q* \8 ?7 y" {

2 M  F) h( r  d* ?  f$ v* O6 ~8 E0 t  A; s2 m
(6)Actions:
# A# s; E# [% N

我们看到,当点击三次后值从2变成了-1;页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不介意我们这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:

( _7 Z- d3 C; v- t6 c( X& W% ~


0 A/ j$ x5 D* K  T/ z; Xmutations:{0 D7 j* i1 v. z
      add(state){2 V$ u3 L( U% Z2 _* h) x7 u
         state.count = state.count + 1;7 A5 k9 N# f8 N2 @/ f, A  t; Y9 N! V
      },
/ x' i8 Z9 V* R      reduce(state){
+ C3 j7 P/ Z4 ]5 U6 o3 I        state.count = state.count - 1;: \5 p9 J! e  ]" ]  G& x
    }8 M- J# v! Z5 T3 E
  },
8 G6 x, N! A# @' B  actions:{
6 }. ^' c& b' B( f! Z7 l4 N- Q      addFunc(context){
& j/ S/ {( x% ?5 L8 q2 W8 X! y1 F; p          context.commit("add");
- ]! Q: a! d0 F% }1 p% H" O      },
/ x4 Z. X+ t' ~" F% R- Z      reduceFunc(context){
7 c4 ]0 d" k  Z2 t7 c          context.commit("reduce");
8 a, ~9 F! a8 ?! E! f/ R      }
3 l( w" i3 U& ?5 m7 J( [  }  Q0 [; O* q* }) G' U( ?' t, W
1 S# z( w) r. e# f. i

* x- J5 C7 L6 w& G


% M9 t6 e6 t: h. S  methods:{5 [  m  g) N. \
    addFunc(){
* ^8 i" J7 q8 S/ q+ n: |( `      //this.$store.commit("add");9 a3 k; P. ^, A, r
      this.$store.dispaTCh("addFunc");
, [7 x; D7 N0 \9 f1 g+ h    },- l8 j2 D* Y6 g* w# r. e# O: Q
    reduceFunc(){6 B8 I$ F/ U$ ]  s
      //this.$store.commit("reduce");! Z2 B! o1 G4 R
       this.$store.dispatch("reduceFunc");" v+ Q: S) `4 T
    }
- y, c& T, `  }) n& X, r' h, Q# r  }

& p' b# @/ B. _; Q  @& p

% c2 s: z* x# z$ Z; Q/ j这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的
+ m( t% H- s2 \: u- ^6 ?实现效果一样!!!!8 @. ]+ b* u, {

- c5 D! S" ]) x. M/ C/ S: k: G, F# O

+ A! M9 U) L' x) r: Q4 j: ^- q
& s  g# l* v8 H0 R. H- `. D

5 [1 K% l& `6 c5 u! L

- p1 {2 `3 l6 a% y
# z2 O4 f! c2 }2 b& [2 {
3 ?" w9 H5 b% g; k  n: o( p

% E% ]6 r3 x1 t0 D/ N+ `3 K3 y, O
7 b4 L2 w$ A& v  b

6 D; n; j6 \4 F* ?
  u- H8 s; v+ u' O4 b& _4 ]5 g4 W2 Z8 g6 |
9 B2 h' D( R9 R* t

# L# e( X& X0 ^" l; L' @9 m2 G( J0 X7 e+ H# D+ o7 I8 p( W5 L4 L
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复

使用道具 举报

全部回复1

admin 发表于 2019-6-12 15:28:01

admin 沙发

2019-6-12 15:28:01

mapState、mapGetters、mapActions

如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;

我们修改Hello World.vue文件如下:

0 ?0 a6 ]: x: C! X* w7 }

- d# c: d" w8 `$ A


7 R# x0 A$ o) s* h( X( r

正常显示,效果是一样的,我们就可以不再使用很长的写法来调用了。8 x* U5 ^: y$ W& C, o
) h0 M9 H) i7 `- R
import {mapState,mapGetters,mapMutations} from 'vuex';
5 x) e2 d3 h! p. k% B! f6 `) \export default {; p) m$ `+ W: t. f4 x+ ~
  name: 'HelloWorld',
8 g0 X' a8 S4 F1 p" B  data () {1 n: ?; Q2 L' `8 Y5 s% r/ f7 |
    return {# N0 q& v: w) F) N
      msg: 'Welcome to Your Vue.js App'+ S% D3 M; C) D5 R/ L
    }
2 a+ e( G7 h) z- `+ j: w  },1 e) Y0 W$ A4 _
  computed:{
, }3 |4 v. u- U7 M    ...mapState({- @; _$ X# B+ `# b; f
      mapCount:state=>state.count
- P4 r" X* ]7 q- F: R* E) o) f* @: L    })1 R/ W/ `/ c) e. m
  },
) A! [- _0 {$ j( T7 E: R  methods:{2 [& b7 D# T9 o' p0 c0 c; c5 _
    addFunc(){
5 W( h% g- x; |) V  Z      //this.$store.commit("add");  f/ M( t4 b! B8 `1 y" ]
      this.$store.dispatch("addFunc");
6 }/ v1 W1 Y( S. Z+ s    },
; l/ f  L$ L/ @7 k6 b% B4 [    reduceFunc(){5 f0 @5 @  Y% Y8 k0 d
      //this.$store.commit("reduce");# A; z2 a, ]3 q1 y( W' A
       this.$store.dispatch("reduceFunc");
* H" x) d4 w, i) R; c! F0 l    }0 X. ^5 |3 ~7 a  N3 w$ n# g
  }" _) a: S% f1 p) b; s3 l! h# g
}& ^7 O9 x# y$ B

( D% P" H2 R0 c& a% E) ^
2 |# E  a4 P  T3 [  @

& U% k! G: G+ _' x$ Q; b( T+ e4 M( s1 a. O- v
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 www.diantuankj.com/ doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了