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 1878 1

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

admin 楼主

2019-6-12 15:24:50

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

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

x
Vuex 的用法详解9 Q; v+ P, r7 S1 u' q) @1 R7 }
. a) _& H! S! r9 h, r& {6 ~
本案例测试下Vuex的使用,创建一个新的web项目+ D$ d- m$ ^/ m  B' i$ R4 o! A
Vue init webpack web
! B0 |! @! H2 x安装vuex7 x: q9 O( |/ W
npm install vuex --save* G' w% d6 C. h5 u2 D' d- U
启动, npm run dev,打开localhost:8080  即可
3 v# `! |, W  I* _8 i! z9 K2 W* g3 v! H6 X+ u, c  J1 w
4 N! o, b. h8 x& G7 k' u- k0 r
(1)引入vuex
% a6 ?/ P( d( M; w! s创建一个src/store文件夹,创建index.js , 引入并导出store
5 v* B5 H& Y4 ?/ _& i2 ?import Vue from 'vue'
$ c  P4 c: V  T( g0 Z$ x) vimport Vuex from 'vuex'3 u) R8 K: C) x. C( E, p
Vue.use(Vuex);& c0 A: V* e* Y" w4 f, H
const store = new Vuex.Store({% g* w& f# P$ L+ ?
})" M+ I- D8 X" E2 q" v0 c5 E
export default store;
5 Y6 q8 i3 x9 g
8 v# l5 F& ]' [* ~( A# O(2)引入store到main.js
# c+ @. R+ W9 a; @4 \& _import Vue from 'vue'
$ ~% k1 m/ @4 bimport App from './App'
. U$ ~; t* M/ m/ b' Mimport store from './store'
* e0 C& h  [6 g: Z8 }( w
3 \. J4 M1 ~2 v! w9 `7 IVue.config.productionTip = false5 [3 ?& V: U3 @+ |. b/ k& ]! _
. Q' q4 L3 H( Q1 T' [7 V
/* eslint-disable no-new */" O& P) w4 [) }4 l
new Vue({
( x8 `* I; }4 n: {. G+ f  el: '#app',
9 v% i/ X9 N5 m- G  K  store,
. j3 N+ S2 n  |0 Y- R  components: { App },+ M9 g" P+ f- P0 p- A& K# b
  template: '<App/>'
- S' i2 o' ]8 ^})
6 d7 d( g7 s& }- L% r8 ^' {! s+ F
3 z( R/ g. |" j' M1 C
# t2 r4 ^+ Y' [7 R7 X4 k2 u
4 W' R) T! d( K" c5 I' S% `0 b& ?
(3) 修改 helloword.vue ,先使用state获取值进行测试" B" l8 X: k# B6 y9 c
State: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;( x5 D$ U  S* Q( K( j& g5 ^; \
const store = new Vuex.Store({
& @' i+ P6 e) L  state: {; t5 X6 z: F- O! u& n% N
      count:1
8 d3 E0 u$ }& m. f/ ]  }
" Z0 Z( l9 a' m/ r+ ~: r9 J}); {5 h. y! p1 e
) e6 c3 h9 {3 K3 o5 s
helloword.vue----
6 `1 S  ]0 f+ `% i. v<template>/ L% E% y: O6 Y$ |$ y( q
  <div class="hello">" T- V' y1 _/ V4 T, t

+ b1 q% Y( I1 H$ X+ ]; k    <h2>{{this.$store.state.count}}</h2>4 q# b8 n0 i) T7 y) d5 ?

$ T8 `' ^7 }/ v; C  </div>: |6 U8 {+ H6 c0 z9 U: N/ V3 p3 \
</template>  t. c3 a4 l7 \! Q6 J

7 Y0 M, d2 g* F3 _& {
+ b& f2 O8 m5 T* `; R
显示结果为: 1
! F2 o3 F9 O4 O6 m
0 Q. _. M, i0 {1 S- B
0 D5 h0 w" E* j3 d5 G* a3 q' c
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:
5 C4 s' ~. f% `) v1 d: _# s: `/ N  J$ P* e( r
const store = new Vuex.Store({
" s" I. L. |7 w; ]( _- @  state: {0 r6 {. T' {+ n4 z- D
      count:1
" `9 G" I7 w' D8 f  },
6 l0 ^8 V7 K" }% L  p  getters:{; K$ u- l8 Y. o" ?6 o0 ]* w/ i, L$ A7 I
      getStateCount:state=>{
/ p1 c6 S. X1 H# A          return state.count + 1;
0 q: _( a+ z( c2 y  d. b3 D) K! V      }
+ E& p8 b) U+ ^( q1 N6 ~  }) s: y5 Y$ }9 E8 j
})9 X( X+ J8 d' R0 [, U. v
  ?! F3 ]: c% S( X& m/ |3 H- Q
<template>( i7 f) ?3 W3 d, Y
  <div class="hello">3 r  W4 _" g7 y- P8 T- a6 W' t

- _# a, N3 l4 m) v. }7 B/ f/ ~    <h2>StateValue: {{this.$store.state.count}}</h2>2 |" q: [& s2 }& o; d9 ?) h  [
     <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
2 _9 R, I" b/ N! @$ {/ y" S* M7 A, ?  </div>/ b! x3 n. u7 L; k9 t
</template>* v9 a0 D1 z/ i4 |

. b- X- S9 R9 r# z" x) a

# e- K5 i- k( [4 I1 _9 F- j( Z显示结果:
" y7 }3 n% |' k  [StateValue: 1GettesVaule: 2
  t# Y( F/ Y5 f3 r9 `; Q1 v+ t2 I7 {9 Q2 }
(5)
2 O3 p0 t1 u* i% @: X5 b4 }# _

Mutations:

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

* g7 r) l9 G9 W6 |1 b
修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:
5 G' j6 b3 Z  c& Imutations:{
8 J$ O$ ]9 J# f0 z, {/ r7 t8 C0 B% p      add(state){' A9 L/ |  `% R* e* K
         state.count = state.count + 1;: d9 A8 e# g2 q0 U( c9 E
      },8 y- C' X6 h  |
      reduce(state){
8 N9 R+ x( [) p7 p        state.count = state.count - 1;' ^6 p4 ^: {5 i3 v  p% ^! e+ u2 U
    }
. f0 b" i* t  e( @$ L& ]7 b: F  }
" {6 ^) C8 x0 H0 z4 H<template>
8 F+ X9 k0 v8 y3 a7 L) f  <div class="hello">& \+ U; i1 q  S( Q. d7 {$ h9 r' l
    <h1>Actions:</h1>
2 v& s: p3 k& E, M$ v4 l0 M    <el-button type="primary" @click="addFunc()">Add</el-button>
3 X0 F0 C% Y/ C6 a7 S! t    <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>
/ e$ J* Q) V  [1 |    <h2>StateValue: {{this.$store.state.count}}</h2>
8 t& q* `2 x" ^, u% N4 F4 r1 G- L% l    <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
& s+ i, S1 o9 E: U! H" _  </div>8 j! y( U1 {+ {! s5 C1 K0 B# Q; v4 Q
</template>7 q) [- [0 x8 _# {8 F8 d

) \# q& L+ u7 Y5 S& }: _
! I- S4 p! ?  w, l
结果:6 m& e  n( |& v, {" k; B

7 L5 _+ w* u+ p4 {9 C/ S
2 M# G. _3 E( s$ _) S- m; q1 F1 @
Actions:Add
ReduceStateValue: 5GettesVaule: 6
! P+ P: R/ G  s% n5 w) e( i4 f! _' m3 b; g7 P7 q1 t" a
- R- {$ C9 Q1 ^) e: t+ l# {2 S; v/ g0 |! j

) {0 R  i! C5 u5 w% n- y% D
: m$ p$ c3 u4 V7 ?5 k: S

3 ]) w0 i# H6 ]3 G: ?
! w/ b# C8 f, D8 K. L

$ l; [) M  E- q7 y  a: B
! ?1 {8 ]! K0 W! w( h(6)Actions:
2 \3 |) b/ h/ ]9 h- @6 N

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


& h) @1 u7 v4 Y; p. e$ Q

' q  O; n, _4 ?2 U  w' K
mutations:{1 E0 g0 c! [) m
      add(state){
# A0 L, R! |6 B) y* B( M         state.count = state.count + 1;+ @" K  u. \. k  }8 G$ o
      },$ `( V$ Z0 B' H
      reduce(state){2 P- a$ m; W3 ^: d
        state.count = state.count - 1;
- c6 o+ W' J1 Y6 `3 D0 k& i    }
& V$ R+ A; H. n, i: f3 a8 f  },
/ _: O/ i0 G/ `: z' [; n) n  actions:{
# e  |0 m' }& m9 f) S; ^      addFunc(context){
! m" y+ ~' R; }' a  T+ v- m# `: V          context.commit("add");
) d" n; ~6 `' n% k( n2 _" t      },
% y& X! W" q. B. c* {7 F8 ?7 T      reduceFunc(context){
3 j/ i# t5 u9 l* @# d1 K0 I5 l          context.commit("reduce");
  `9 C2 Z. n0 o) h, R      }
2 I% s  N! o6 ?% e' e: p( I- O" E  }
5 \" d3 S5 \. L+ R* j2 i+ g

) J# [  `4 ~; K' J" r& p2 ^

- z8 p! u/ I9 ]! }8 j

1 X' L, d( Q6 {3 ~
  methods:{: }2 U$ G4 Z) r7 ?* f# |
    addFunc(){
. T* q5 x( V7 U+ T6 y5 s      //this.$store.commit("add");
5 s& ?8 m! r" `  V( B) F& \4 s. ?      this.$store.dispaTCh("addFunc");
8 |, u+ v; Q6 u' f& O    },
# Y7 [4 ~2 _" |8 _7 G    reduceFunc(){
. Z' o* o: S- _* d; b! ~      //this.$store.commit("reduce");, P8 _# n3 I: `2 p; p
       this.$store.dispatch("reduceFunc");, R1 e! f! y# l) {( n
    }
8 ]1 `6 e" Z$ X3 }) K3 I$ z: c+ w) V  }

, b1 M. s9 s) j+ g( A; a$ G
! h5 I, O: O9 z: F: T. D& x
这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的8 K: @' H, O. t1 X
实现效果一样!!!!
, Q& J8 y- t; \# s6 c
2 q# c& {# k( T6 ^% t9 B1 }8 @) L! o  k5 [$ P8 ]

2 w( l8 N7 i# m! C# P% E

# _1 G) m  I) L$ P: t* j2 G

3 q9 C( O5 w5 o7 ]$ p. f


" u& R) @; ~" A, P7 s# [% T1 E' t% x# N2 P1 G+ }
' i+ a+ Y  k: t' C- o

  m; k0 Y8 F! W3 n% q
0 N2 v, ]) n4 U
& h9 D2 C7 m+ X: n

# F  B: s1 Z- }$ l
& c4 j3 s' L0 G+ F8 ]. P+ `- o6 d8 f4 r) H

5 |0 o. K* G" b' r
6 k+ {  D2 J1 L' g3 @
上海点团信息科技有限公司,承接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文件如下:

( w7 |% R: {" f6 K, l- x- d


( B% T: b0 f  V9 m" f$ A


& i( g" X5 B8 @6 Y

正常显示,效果是一样的,我们就可以不再使用很长的写法来调用了。
! y/ n7 j$ |% F) R, e( B

- e8 p  P4 y: i' w0 U; Zimport {mapState,mapGetters,mapMutations} from 'vuex';
5 g% r7 y6 X9 g+ e- |export default {" k" M) y' }% j8 w# m
  name: 'HelloWorld',5 g$ i3 E6 ?% b
  data () {4 m6 \( A, b6 Z+ L" ]$ ?
    return {
; N5 F. {& a0 s9 `) n      msg: 'Welcome to Your Vue.js App'
" p( d$ b6 j0 d/ g" q0 F    }3 H  f) S% _! `/ Q; ?
  },
- j6 D' h- S5 E4 J3 e( c5 T/ [  computed:{
9 r8 i( j# p  ]* N* G, g6 e    ...mapState({
0 r! O+ C! v* v4 t      mapCount:state=>state.count8 ~; k" @2 e8 x' Z
    })
1 r6 O0 C0 m, r  },  B, |5 X! _" g+ L3 a. g
  methods:{
! o- f" G9 M' D    addFunc(){
9 F( \& B( M* Z$ {; A      //this.$store.commit("add");
; K' C& K0 R, l+ y; B( J7 x      this.$store.dispatch("addFunc");- S8 U% ^6 {2 Z! p
    },
  b  i5 R. |: G5 w, K( R6 d3 m    reduceFunc(){
2 u( u9 c  G$ c! O      //this.$store.commit("reduce");
- f& F$ {! p7 @# \! |/ t       this.$store.dispatch("reduceFunc");5 d5 x6 e1 V( @1 a
    }% h2 I8 n! x( b0 B6 _4 Y
  }
& A/ E, z+ x/ ~( ?}
3 e0 z% d+ p. D# V
3 ]) P+ z' ~3 C7 k+ ]( H; q0 i# A( N( g3 S. A

1 W% W& [+ ?$ i- C& I) b$ R  c' r: J- O5 B3 d  W
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了