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

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

[复制链接]

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

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

admin 楼主

2019-6-12 15:24:50

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

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

x
Vuex 的用法详解) m9 O* C; ~5 i

7 V" m, k4 H" w* p8 x; _# _本案例测试下Vuex的使用,创建一个新的web项目
( l$ V6 N" N/ L+ x% {+ [Vue init webpack web
3 w; v$ a. Z3 G) A安装vuex
& P0 o& t* L/ g5 m2 p8 G5 y( m' L% anpm install vuex --save
% ?% @+ W# N% ?  c! j6 M启动, npm run dev,打开localhost:8080  即可
: r, ]: a5 j. l/ `, A- D, m6 T! z( J0 r2 \9 a

6 T% q. q+ \/ I) V/ S(1)引入vuex
3 U4 U0 B+ b! L4 Q3 \创建一个src/store文件夹,创建index.js , 引入并导出store
+ E3 I. b* S: g+ S. Zimport Vue from 'vue'/ I5 Q2 v: Y( @( @" P
import Vuex from 'vuex'
$ ?/ H& D! `/ j& I: ]  @) K" ^Vue.use(Vuex);
" I9 y2 N, {& {% P, \4 rconst store = new Vuex.Store({
* t" {6 y! ]% `. h: V6 R8 S})
0 j1 `' k6 B& \1 l: ]. G7 yexport default store;
9 f# b+ a9 x- n& l7 S: n+ V
8 P6 I. x3 S1 K2 O5 _7 G(2)引入store到main.js2 E: S) a& X8 [/ b1 ?
import Vue from 'vue'
* ~- t8 s9 A7 bimport App from './App'% \1 t( X+ Y$ I' @6 P4 F4 F
import store from './store'5 ]6 k0 y0 Z4 r  i

4 C  q" f* _: A% a2 gVue.config.productionTip = false  d( J* O8 ^1 |2 E! S
1 ~# \3 s4 R- \: r2 W" Z
/* eslint-disable no-new */
0 a9 X! g' j8 U; ~: enew Vue({5 L! S& j% ^5 Y* d4 P5 W
  el: '#app',* L4 ]- r4 L- b: U8 S
  store,1 \3 L/ T9 S% L$ I8 A' Z3 ?
  components: { App },+ s( s! |4 K$ I7 X  ^
  template: '<App/>') E5 Q; z% N& S3 r4 S7 f
})6 w, c! T2 Y1 `

+ H* U; I- Q& |( f1 h1 x5 m

/ a" ^  G( e( N0 e
2 W+ S% P9 A) j- X: t$ n
(3) 修改 helloword.vue ,先使用state获取值进行测试
( L; C, {# ^0 P8 B$ @& [& rState: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;
* D  O9 l7 Y) y2 ^const store = new Vuex.Store({+ W7 J5 N3 T# n5 ~& y1 b" A, E
  state: {; n: E" o9 C; A% |5 K
      count:1
( j0 H. O! P# ?! }3 a  }
8 G2 n, G8 T- @- k3 {' x; e' U})
  ?* O1 o, |6 l9 o5 ]+ r0 Q7 Z; Z* F. @2 S
helloword.vue----
$ O$ r/ v) T: Z7 h/ X% {2 c6 D( L7 q<template>, v4 c. {) x% X+ e) i
  <div class="hello">8 e; _0 b4 ?+ k! u/ d( e) f; I7 Q# T
. |" |% |7 \, U, d
    <h2>{{this.$store.state.count}}</h2>8 v% O  B9 N3 q0 }2 s
# o  w8 e' O& {- h# W5 g
  </div>' A0 \' ?, m$ F
</template>* U) |; p; M$ t9 f8 v8 y$ C- O

: V8 M9 k7 H, m- Y9 z5 u
% M! E" e% T+ N$ k/ j
显示结果为: 1
: F' }2 G( A$ }7 h
4 n& B- Q) u' {
, u) |3 w7 f* a+ _% s: W% ?' R
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:! _, ]# I  @" b% t4 i6 R9 K% P* y5 E
, f% n8 z$ E+ O4 u5 I; S1 ?
const store = new Vuex.Store({; V  M" }' j& s
  state: {: [, h8 [! U$ P
      count:1# H6 }' u, `( C5 t7 R
  },1 ^4 J) A& Y; @% o, i
  getters:{7 y- G" a2 S& _9 ^& v) W2 }+ d$ K% W
      getStateCount:state=>{
) U- S' d. k6 L6 R9 s; n" }' z          return state.count + 1;% W5 C# `# M3 k
      }0 [# u, O4 D6 v7 I
  }
' q& O- B( ?: U" h}): {! ]* x1 i, h, t8 `2 M9 ]! p5 ~% c

& e6 Z! l4 _5 j( e& k<template>! |' G3 B4 K" ]
  <div class="hello">
7 p6 V( t# A2 U9 @0 O1 T+ v, a( b; q3 A% Q* u, t% P$ h
    <h2>StateValue: {{this.$store.state.count}}</h2>
: _: T4 A" C$ Z1 D1 s8 ~     <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
, K! R: J6 _! f% u  </div>7 p8 ~3 ~3 \! ~1 p1 I* Z" u: h
</template>
; s3 T  O# C; y  H2 Q( p  Q
  F4 p& X1 n+ z# o
% q5 }+ `/ L" s' j  f  I
显示结果:( v  }( p& y4 e8 P0 s, _4 w7 ^
StateValue: 1GettesVaule: 2
* I0 \! N5 U  S) M9 ^- C' C% j7 T! ^# {: X7 [* y/ V0 z8 w
(5)
" P0 R  R* ?5 v

Mutations:

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

$ H1 w, R$ m% @) w0 N
修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:. f; h, d, r  V; r+ y# K" X
mutations:{
9 N4 I+ T* B5 |. ]. P6 [      add(state){
* q" u* [  q5 C5 W         state.count = state.count + 1;  U3 t! g7 \! H# C( q
      },3 p7 {6 s9 ], ^. u( \
      reduce(state){
- j( P1 B. X+ {8 p        state.count = state.count - 1;
( T9 Q" g. c9 q: i7 I    }
' _7 O0 H4 }1 k- ^  }
6 s+ Y' J2 Q- u" p0 U2 e4 C* `<template>  Z* Y+ a; p5 j1 _
  <div class="hello">
5 M4 M$ L- y0 G+ v: z4 ]! n    <h1>Actions:</h1>5 q. @- _* U* C/ Q1 B3 \  Y( E
    <el-button type="primary" @click="addFunc()">Add</el-button>
/ l" k# b0 L& |% C, Y, j    <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>
' ^  x0 r( k  k: B( O6 p( S    <h2>StateValue: {{this.$store.state.count}}</h2># c+ v0 \2 Q2 }1 J3 M
    <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>9 }6 x7 a6 J. N
  </div>
: t  f' W  ]" ?2 r% h& M8 h</template>
# q( \0 h* \  F) p1 `. H1 s" ?" N( A6 q; D6 a
6 O. ]3 S! L5 T6 f; P% ^! x4 X  V
结果:
, L  `- \0 e) A* l% t& K. B" R
6 Z! v: B( l) c( d

, Z# y2 ^& f; [1 ^+ V' rActions:Add
ReduceStateValue: 5GettesVaule: 6
$ A& L$ H, z1 P% z* B6 A. c. s
2 |" D( V7 N9 B* s
' v3 ~- G  `$ v" {/ a/ A
5 c/ V1 S! ^7 B) \) O# U$ o5 `

3 n' y, J$ s8 ~
: @; X$ z) Q2 B# t& p5 ^9 P

' ~5 s( _: C7 `5 }6 B# j$ @

6 j/ A) I' N1 Z1 I4 e/ l6 O/ c
5 ?/ l6 m8 ^+ h6 g3 t  P( q(6)Actions:
+ ~) K9 Y7 G9 V0 s% _

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

7 q7 H& R6 z' |2 k


9 ^; ~" P) {% R6 Jmutations:{
2 ?9 W: W8 _; X      add(state){
* d$ J' h/ @  l; B0 T         state.count = state.count + 1;
% [0 o1 j# x3 C. T; @# P0 i( G      },# h( P! W" k/ z4 l( F
      reduce(state){" S, j+ h: C2 Q8 t" Z* V
        state.count = state.count - 1;
* j) t/ Z$ Z- _1 x. |+ C# G) h    }9 O4 F9 n5 F( \8 |" E
  },
* G/ R8 B/ J8 _3 i  actions:{
" r% ~2 v# l$ M2 g2 D      addFunc(context){8 r' b/ b1 Q0 ]! t+ T1 q
          context.commit("add");. W; c5 W; T% z5 @
      },
9 z7 H4 P' E5 v/ n2 T      reduceFunc(context){: Z1 B2 _! c+ P5 z
          context.commit("reduce");
+ H! n3 W$ c1 s) g- W& I      }3 E' @- P6 _; E+ H
  }+ j1 R9 j9 P6 f$ ^

0 S6 c; T/ ?4 {


% v7 }; O# I$ [* n9 X

/ Z+ o1 _8 b# W7 ]1 E+ c# A  S0 b8 q
  methods:{
8 q! E5 s5 q  z3 R& Q5 z& z    addFunc(){8 o' w- _9 E+ h7 T: ]
      //this.$store.commit("add");
' n' ~/ ~7 D/ v      this.$store.dispaTCh("addFunc");
  q2 l9 N7 V! m3 k" Z0 f    },/ U: b4 j; @! l0 e5 m$ b$ w" T
    reduceFunc(){* J: ]* P+ t2 B! C) z$ f6 z) Q
      //this.$store.commit("reduce");
5 m* P) Q& V: A( j# V       this.$store.dispatch("reduceFunc");
, h. z4 q0 M- x    }) B) D. p2 ?$ N/ ?6 M8 m
  }
# o: k( h' C5 S5 y

, @" b+ i, e' `' C( _$ m这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的6 s* P! n. p9 w& ~  C! [
实现效果一样!!!!  `3 \$ d7 e+ W2 K+ f) O
) a( C) s8 H) |* a

& w8 @2 }3 U, W; U0 s- k5 l) ]+ J6 S' R' Q2 _2 a

0 W+ F4 v9 b% M$ N


* Q: n$ y- a: Q% X


' E% K1 D4 k- O" q& C2 c8 z# t, t) S( j# f3 @

6 `5 d5 H" r7 u' d; @! X% c4 c% \2 v. L$ e- G- d
, q/ Q( ]; R$ g" f7 r2 o4 C
6 r0 T9 w) ?" C
; _& e3 a8 D4 e  `

) J( U5 H2 Z' m/ F. @- P
5 S3 x, n5 w$ ^6 N! ^8 o1 b; \. {) e; {3 u" g; H+ ]

8 z% \2 U, z* A. q
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 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文件如下:


" o: }8 R6 u; P0 M6 W


( K2 d! c7 }; i2 G% s


# j7 O# w, y4 O: t. N/ F7 {. S' ~

正常显示,效果是一样的,我们就可以不再使用很长的写法来调用了。. Q- C% i" E' ^1 ~

: |* y5 l) v+ s+ ?import {mapState,mapGetters,mapMutations} from 'vuex';
4 X( x. i: `( ~9 U1 s+ v; xexport default {
2 ^& P( T& Z2 |1 i) O! o  name: 'HelloWorld',- U! t# V% `# t% n. e9 m
  data () {3 [2 W; g8 s+ r
    return {
0 c2 y- x/ x+ R) L      msg: 'Welcome to Your Vue.js App'6 b8 ]( o9 j; k, z- g; ~% ?- L
    }" C1 v/ b2 z! [8 _" ~0 ]" D
  },3 N; A/ C- E; j% I. Z# e4 ~% m
  computed:{
: f* ~  e/ {5 X+ D! ?1 W% ]/ F    ...mapState({
: u1 ^2 O8 [2 ~; I      mapCount:state=>state.count
$ \  C6 ?( i/ d6 {% O: Z3 y0 E    })$ |  z" Z; _0 u) k; Q
  },
* U: {. J4 X3 G. i. Z1 U0 w' `  N  methods:{1 \4 j+ Z  @8 v( i2 m' `4 J
    addFunc(){) t: k- K' ]- U. a
      //this.$store.commit("add");, j( P7 I! i# J- ~1 h
      this.$store.dispatch("addFunc");
- `+ R1 e8 K6 J2 Y* a    },9 A; C. e/ o/ v4 d$ Z0 U
    reduceFunc(){
3 Q/ K( r6 ]0 @2 O$ x9 m" o5 e# N      //this.$store.commit("reduce");
8 {+ L' n# K( O5 @0 I% M       this.$store.dispatch("reduceFunc");
; M1 y* H! O9 [) i5 f    }
' I4 o; r* N) X! ^  }, D4 ^: B. O7 c: |3 U
}
/ m0 e" t1 n0 ~! ^9 k2 p* e6 @  \0 u, e4 k# p! T; z

4 J( r8 V) p9 ], P7 n
" o& Z: R' @. f

" ^) h% |6 U/ `% e4 P
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复 支持 反对

使用道具 举报

发表回复

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

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

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

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

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

    我知道了