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

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

[复制链接]

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

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

admin 楼主

2019-6-12 15:24:50

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

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

x
Vuex 的用法详解% G, ]  C8 i; J
7 a8 A! u. Y$ W, f
本案例测试下Vuex的使用,创建一个新的web项目
3 Z4 R+ _5 f; C3 ]  @9 c# Z9 l5 zVue init webpack web0 Q7 n  w/ a# e/ h$ y" T+ f- l- X
安装vuex2 m" E  a4 T  H7 X
npm install vuex --save
  t8 j4 j# J/ a8 e# c- w" o启动, npm run dev,打开localhost:8080  即可
4 x- z' @/ \, x* F8 [( S* P3 D% n
3 ^! @% e/ l7 C: W: {5 p$ R) K4 G. C+ m
(1)引入vuex
/ L" L6 K: S1 m/ k# q) u5 }创建一个src/store文件夹,创建index.js , 引入并导出store; W7 J  r: F* V  J) ~
import Vue from 'vue'
, S+ c! ~- g1 U* z; p8 {import Vuex from 'vuex'
5 Q* P3 Y& \) m  MVue.use(Vuex);
/ K" d' m% i& A' Z$ Dconst store = new Vuex.Store({) j( A0 W% g; `! F
})
9 G( L  ]: c! yexport default store;" E  G/ C3 s; `. M3 X

5 @3 o) i% ]! A(2)引入store到main.js
2 J4 j; W/ ]8 J( M$ ~$ Z/ Simport Vue from 'vue'6 T% j8 ]6 }: ?; i* f2 ]+ s0 ]3 e
import App from './App'
+ D+ L' y3 v  b; X  @2 S- D1 C/ timport store from './store'
" G* o! R+ e9 G' x$ e7 O2 A3 a7 g7 @7 Q
Vue.config.productionTip = false% w$ \) ]( J$ a4 o( A* K5 u3 l
' Y; F/ }9 W+ a1 Z
/* eslint-disable no-new */
- o- r) k$ A4 D1 Vnew Vue({
0 e& r3 L1 P. G1 B* w- R2 e" J  el: '#app',
9 v3 I. q$ b# C& S4 F  store,
  l+ e# A) _, H! V% {* I: S- `* Q  components: { App },/ ~8 J/ n) o! D
  template: '<App/>'
; R7 {4 R- i) U})6 m5 H4 ~+ E3 v8 |( V; W4 W* M
! u. O; f3 \2 E

: Z( x4 }/ u7 ^) Z
" M0 `' c0 H1 S' c) C4 h
(3) 修改 helloword.vue ,先使用state获取值进行测试
$ z* ?5 l$ V* L; D. U: H" J" tState: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;1 x; W& d; ^& C
const store = new Vuex.Store({6 s1 j$ h: f7 ^" x" |6 M
  state: {
9 R' a3 C; p% f' T# G6 p      count:16 a% J6 U' {6 b3 Z
  }
- @, [# s; Q" v})
9 z/ _5 @9 W2 k! @# \1 u  h5 [3 c' b7 m3 U  a9 h5 M+ t( T
helloword.vue----. d, u' W' }" h
<template>
* P  [2 ]1 F# l/ t: M0 M5 B  <div class="hello">
& y0 f2 Z4 `- M' K
, S1 c, u/ f' J; y    <h2>{{this.$store.state.count}}</h2>
7 ^6 H4 y/ h& T" n3 R" m) P8 u" E1 a8 [' \! V8 N
  </div>
' R( ?  Q' K- j/ [& G</template>
6 f9 ]. g4 {: t4 K
( ~8 Z7 x8 x" _+ a/ \
7 P8 m  ?9 o8 T% @- Q9 B: n
显示结果为: 1
$ O; H7 x0 K' X% e: {
$ h; x4 g. G# Y' C
4 ~, b: f% b2 z& }
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:
( ]# f( t" F- i5 J/ U2 z. f% J5 M+ K) g
const store = new Vuex.Store({: t0 J- x  ^' o
  state: {- a; w* ]4 s7 z# |9 H8 Y
      count:1
1 w3 k+ t  q# o  {2 ]  },/ e! D6 ^2 j9 p% a, ]# ]+ [
  getters:{  x! g0 A7 }# k' }( M1 x
      getStateCount:state=>{
* S; M  J9 A) S  ~( W! n          return state.count + 1;
& [+ m) @7 C+ m* y& V      }
2 H: N# P7 ~$ h0 m( a- G. c  R  }- K: ?9 Y8 o, w1 |' C4 e
})
, {' A0 \4 l0 P9 o* ], s% @+ _4 K) `& [' N" t3 P- V# W
<template>2 R; y5 ^( Q0 U+ o
  <div class="hello">4 S0 b3 K4 j% J

+ M" i% f7 e4 ^; N    <h2>StateValue: {{this.$store.state.count}}</h2>
4 b# n5 Z; W; x  k+ L$ c# w. n* w     <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
  ?+ R% u7 E6 ]# @) g9 `* r& t$ z. |  </div>
& c0 y% [2 a7 {" ]( ^</template>
& p2 G) Y4 M. _4 q; |3 e. z
% E" n/ u7 t1 K" f9 t4 @5 Q9 W

7 b. r! u. Z4 C6 g显示结果:6 z- B( Q& L. r' q4 C
StateValue: 1GettesVaule: 2, v" O- U2 j" r5 D: ^, c0 Q1 L# k

' i8 |4 w$ c& B(5)
) x6 O7 W4 [- Q% \7 N: k6 b' z

Mutations:

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


2 o. Q0 s" I- f* l" O- N修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:
$ O' c' s* _! @4 U0 [mutations:{
) n2 d3 M. a* R      add(state){
% D9 J0 V2 p/ {9 u0 ]! y         state.count = state.count + 1;
* |- d5 B4 E3 g7 I, q/ c      },
! R* g( A5 I2 ?4 X5 P$ F7 o& ]# }      reduce(state){
1 `( x6 K4 W" ]        state.count = state.count - 1;! ^1 |# q+ c1 F8 S
    }4 ]  U6 c# v; F* F  F1 I) F
  }" C& ]: T0 J+ y. o2 D3 x# ^
<template>) f8 Q( \9 D0 a+ k. b
  <div class="hello">
  I5 N( o& P) S* R( b) f    <h1>Actions:</h1>
% s$ R6 N- o* C$ _$ i    <el-button type="primary" @click="addFunc()">Add</el-button>
9 @$ d$ @: F0 I: e    <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>
' y' d, W% Y, H+ f, P; @: S3 m  C" g1 n. L    <h2>StateValue: {{this.$store.state.count}}</h2>3 ^- z# C; v' V0 O7 j! f' k" q3 q
    <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
5 b+ Z- h2 [8 w/ _' Y% o$ c  </div>
* S. z" V' y( \/ d</template>, G8 p. f2 |8 ]/ o, _6 s
& j' e7 v( P! p. z$ s8 R; T

! C, r' c1 M' C3 }  h结果:
5 Q7 n) ~& `6 F  m1 y1 N; ^
" T' ~* e" W- n( y

$ ?4 a( u3 S* ]4 U; uActions:Add
ReduceStateValue: 5GettesVaule: 67 N/ C  u6 C* S, U

' e8 M0 L4 f4 T- s, L8 }$ W, S( Q9 F& r# t- W& w8 {* \
% ^- r. c9 I9 r3 i4 `
% f6 D$ s5 T/ i- H6 z, \; a

5 U4 T$ U+ i$ W8 T  |0 n+ z# [. A, v/ V* |( j" o4 }' [. z* x+ @
0 b: K8 O9 [4 Y
; j6 R  ^6 M1 E
(6)Actions:) V8 p1 x* G% {% j, E% s5 K

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


6 c  f7 Z1 L2 a, \0 s1 ?8 k: a

' ^1 Z, V; @+ g8 I
mutations:{
4 k; X1 ?, F# A# H5 Z9 w+ p. B( K6 N      add(state){6 ]5 x0 P4 E' _/ t' o7 {  ]/ R7 n
         state.count = state.count + 1;
* X9 I! J9 R9 k3 ^8 o      },, g+ m1 T3 o. Y: s* ]/ O( ^
      reduce(state){, X/ [3 Q* _9 P& u/ j+ F0 O/ J. g& V
        state.count = state.count - 1;
& I% [2 Q1 w: U2 {6 y    }3 k7 i$ F+ y9 x; e2 ^
  },
0 L: p4 x: U9 m7 ~( F  actions:{; w. w$ @! T' x1 N, K  G8 _
      addFunc(context){2 t( a" F; q6 v3 L9 \: }. e- J9 e3 U
          context.commit("add");% g4 y4 Z6 l) n) K# H$ g
      },, x0 |2 y  F9 `- c8 ^
      reduceFunc(context){/ i) Z" Z/ M0 A  |( u" w0 A" W1 F; ?
          context.commit("reduce");
3 ]# I( d; m5 h. _      }
7 ?5 e! @" N, m: m0 L  }$ U( |: c3 l' t" }, p
+ b+ n& _9 Q5 X8 Y' d0 X! a

4 ?6 J7 w& }0 ]$ O' r. L/ h. l

5 o) w& N  e: g
  methods:{! W0 `9 a3 f5 i& O; c
    addFunc(){
! t. B1 I  _1 t' x      //this.$store.commit("add");
" W; |8 g! |- N6 ~5 j$ t      this.$store.dispaTCh("addFunc");1 I2 R. G% n, B
    },
8 ~- A# Y: B6 P4 v    reduceFunc(){
/ x2 y( q" X2 y9 F  y      //this.$store.commit("reduce");0 e8 l* g: W7 R+ h  ]5 d
       this.$store.dispatch("reduceFunc");
0 G  @$ \) w" i5 G3 A2 [    }  u/ _" E0 h  |' d* F5 k* \
  }
/ |* s+ U1 l1 L5 E7 O

* n1 v- Q& {+ I4 ~& ]+ _, D: T这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的% t; S# T$ \" K7 M: ]1 X0 m
实现效果一样!!!!0 W$ d6 {+ o9 e0 C& R$ l
: a9 \) N. @7 X" u! g% C
% J% d  |$ h; N7 p7 d  F
6 H! u% S4 d; [! H3 q

0 `2 a5 u- q, _9 v

/ c; b3 G" E& w* W. o. c  w3 |! z% N2 Z


/ \9 l' M: D& ]8 q, g, m' z& L
  i' [, R* a7 \, S7 `' w
* z3 Q. O3 S, ^& N& i; y' Q
! |  c. r6 A# R0 F$ e4 r

& r, ?, |$ X( o# r& t$ Q+ W9 T

& B, l' E! N4 o# V' {6 H
) d9 T5 x) u9 [6 H9 p: w* d+ ^8 S

4 k) C" |7 c) e5 @+ H
& b/ s( Q/ x# z* E8 E, O2 k. x$ o* k6 e* W
上海点团信息科技有限公司,承接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文件如下:

; b7 @. e& Z& P" o9 v$ G/ N+ {9 \/ G) Y

, G  S3 R9 K) }


: b4 k6 Y$ W1 K

正常显示,效果是一样的,我们就可以不再使用很长的写法来调用了。1 X1 {1 i) J) F# ^+ D5 l

* S) E& Q- b) F. ~- i& Jimport {mapState,mapGetters,mapMutations} from 'vuex';
9 D1 U! U. H; j( h* Bexport default {
# f5 B6 N; J/ D2 V0 b; N7 t6 J  name: 'HelloWorld',
, ?" Z1 |5 L" z1 j  data () {0 Y9 p5 b: w* y- O
    return {
5 s) I7 k1 Z3 [4 t' ?      msg: 'Welcome to Your Vue.js App'
5 O- k$ j+ ]4 d6 D    }
7 D! g& P- b( G! a5 Q! a# e  },: d7 c) f9 i7 ]8 x6 \
  computed:{% n7 V$ t: g3 Q
    ...mapState({) v9 ?9 t7 j% s* A& {5 |  L8 K% y
      mapCount:state=>state.count
, K* v$ y% j+ B3 ?7 |! V; o$ m    })
, v' U8 L1 E) s& a  },) T! \7 D, y) a7 s8 k( o
  methods:{! q: t3 J- \' H( ?# l4 c
    addFunc(){: c9 ~) ^- X  }( F) K6 c" @; E
      //this.$store.commit("add");
4 C( S6 ?) z  V      this.$store.dispatch("addFunc");
; \8 W6 r6 p" A2 K  I* s    },2 _; d& \6 r" b7 I
    reduceFunc(){0 m' ^3 v3 q% R+ u
      //this.$store.commit("reduce");
% i4 e' d' M9 n# o, q3 k       this.$store.dispatch("reduceFunc");0 b9 V3 O9 B7 \" Q1 }
    }* I  ~- p) z6 O
  }/ }% @$ Q8 f7 O& n, ?
}( P( m, p  I% @
3 i9 ]1 n! {% ^: L3 I2 J

- u  c# C2 i# c/ U* e1 ~6 E* s
; ]: k3 k, ^. Y' u$ m. r5 c' ?1 w

7 E3 i7 i; J+ H' H
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了