PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-6-12 15:24:50 | 显示全部楼层 |阅读模式

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

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

x
Vuex 的用法详解: g4 E0 ^" V. D$ P' s
* h$ R2 @( T* Q9 C7 ^" M* r
本案例测试下Vuex的使用,创建一个新的web项目6 [" F, R* [& g) x  E2 v
Vue init webpack web7 y2 m3 g# B1 k; M* v
安装vuex
6 ]$ p0 v/ }9 N7 x* A  B; _) onpm install vuex --save
4 A7 i' M8 L: t2 [! g启动, npm run dev,打开localhost:8080  即可5 g: s! w- D- {6 t$ t5 Y
6 G( G4 }2 \. c* K

- c! R1 }& ~. J(1)引入vuex# a4 L0 q  q0 g0 x8 U# Q
创建一个src/store文件夹,创建index.js , 引入并导出store7 f# T! z7 Q. O3 ?" G% S  c( m
import Vue from 'vue'- _! i1 p3 s/ A/ a* Y% [% W
import Vuex from 'vuex'
% ]5 B; p5 F6 xVue.use(Vuex);2 |! `8 `% K0 [. c: X2 V
const store = new Vuex.Store({
; J" M* W: M; Z5 l; [}); d' X3 ~$ w7 J
export default store;
( n3 _  k! D  K3 F  b5 `! y8 `1 ?* v5 D0 z  I2 {6 R/ m# B
(2)引入store到main.js9 F* b' H3 |. M, h, E
import Vue from 'vue'
9 I' r2 Q5 U" kimport App from './App'
. l. T! u9 D+ v8 F- T9 m' K  t1 iimport store from './store'* W( f' H% Y: G1 V$ K9 o' F  ~" d

1 m( D. F7 Y- }+ k" B- m& GVue.config.productionTip = false7 j: S5 l0 e; i! j
8 G7 N1 ^5 ?5 u: |
/* eslint-disable no-new */2 j" r( d$ m3 G$ L5 B$ {* U
new Vue({4 ?4 W, p# V- m; k* V' N
  el: '#app',' O! W# B! }' o7 J
  store,
  [( u( l* _! {- ^( V0 w  components: { App },
3 a# e6 a; K5 r2 m: y2 g! b  template: '<App/>'
: X  w5 `5 e6 _" k, |( o})
" Q6 |' c( w! Z2 C# J6 ^3 L6 {
$ u- Y( B. I. e8 [( w: R# t( ^$ |
, ~( `. F7 q1 d# h. K! D: H
% W! A/ e6 C1 s( Q. _/ U
(3) 修改 helloword.vue ,先使用state获取值进行测试
0 r6 f0 ^& a. ?- O2 E+ @) gState: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;4 O1 l8 |5 ^+ q5 S7 o9 N2 c( E; m
const store = new Vuex.Store({
9 X; b1 `2 P, x  state: {4 H5 G- ?+ K& v& `1 e
      count:1; k  w+ Z6 `# X, f% j) P/ r
  }/ x2 ~& n' w- A  t
})3 T. a+ [% h( O$ Z/ m5 C1 ~" ]# r: s

9 ^) i# d' K& i# D# M% K( I' Lhelloword.vue----
( f( Y* L; p1 Z. h<template>
) C, `. l9 g/ E- ~3 e& g  <div class="hello">! t$ z0 L/ Q: Z2 N6 y- `4 B

; L; ]) s( B4 I( q$ y, K    <h2>{{this.$store.state.count}}</h2>+ q+ G+ H8 J2 d5 v# c

, T% J, D+ c1 P! u/ `5 ~" P' _. N  </div>
1 V2 }! I1 `: C6 s8 \0 H$ G1 T</template>. ~: |) V+ n& ^; [; f
# R' D. `( z& s4 q1 L
( u* ^( `1 x. s. e; x# y
显示结果为: 1 # O% r$ R( A7 v3 a7 M6 {
( G+ p3 e6 w) q( K' i9 m
+ Y! y6 W) c5 n
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:; V3 U$ {2 H% e; Q# M7 u

8 C) r) E3 O) E9 y' D5 Xconst store = new Vuex.Store({! ^- W" ~8 n" {# M3 K+ J7 F! d
  state: {8 b4 ], H2 k& ?) [
      count:1
, d/ }& l5 _1 K* Q% E4 C3 Y  },
' R% T. K: |9 v  getters:{
2 a& H, s0 M$ u! U      getStateCount:state=>{& i6 R8 w0 p" l9 f
          return state.count + 1;
% Z1 {5 Q% @  O1 o  J2 y      }) i3 z; D4 H; d' ]3 K; ^! Y
  }/ l* q- C: P5 ?/ @
})
  e9 M0 A% q# X! g# K5 ^% [3 H3 b
<template>
" a* c1 f0 K1 j5 G, h9 w' G  <div class="hello">
9 j+ H8 e0 e+ P$ c4 ^7 ~$ d" Y
& z' @# P8 D7 W    <h2>StateValue: {{this.$store.state.count}}</h2>
  U9 i+ Z& Z4 z( I4 i     <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
. N& c% c& C. I8 |" U  </div>
& l8 [8 }- f3 R4 P</template>
" e' P& G5 h, n" m" \/ A; B7 S; I/ _" n1 ~. J

- P& G$ j. q7 t. W$ b. D1 L' o显示结果:. C6 ]: ]4 t4 X& C3 ]
StateValue: 1GettesVaule: 2; i! h1 M; g; S% J5 o! U
; y3 p' A; y! M, E9 F6 |9 T" P
(5)0 Q1 i5 o- J6 C+ m

Mutations:

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

$ b7 H8 C3 N& P6 d* H2 H9 d# g
修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:9 g. \$ s/ `1 M6 d9 X. j$ I. P8 U) t
mutations:{; U- \% {$ q4 r( j
      add(state){8 |2 I/ G# k5 ], k! P
         state.count = state.count + 1;
+ R' S! f; X: s3 f/ ~      },
) L0 s1 E" u+ x1 q. i7 H      reduce(state){
- B7 j- l; j+ [# _: M- h) Y+ e: |        state.count = state.count - 1;
. x, R7 G4 l9 i+ F0 k  P    }
6 b/ E& J. H( Y  }, B7 w: o. j, A( G- p1 v
<template>
; u: S; }. ~, F) b2 y) D  <div class="hello">2 M( C+ L9 B6 g# y. G
    <h1>Actions:</h1>; W' e0 `$ m3 a+ @2 V) M2 D
    <el-button type="primary" @click="addFunc()">Add</el-button>! ?3 Y: a7 P# V$ e5 `* t$ I; g, ^
    <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>, C& S( W9 Q$ W1 G5 f& R/ N! {
    <h2>StateValue: {{this.$store.state.count}}</h2>9 w+ F  G  i, q& L1 o* s- W
    <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
5 L( p4 F0 M- \+ v' v  </div>
% ~8 Y# G9 b: J7 }) F3 {</template>  r4 w6 B) P' y: v' X0 W

: ]& Z, `* |* ?, Z+ X6 t
& A/ ^/ {5 e2 S5 F/ h/ ?
结果:
$ T6 `$ |- S, Q/ ^$ b' V5 ~
; Z5 ~9 S1 D) y- C2 K

8 f5 ^1 e6 X1 Q7 o' YActions:Add
ReduceStateValue: 5GettesVaule: 6* D4 a8 F" v3 Y4 `- t/ z* ]$ Y' D
' ?) L2 ~. C  D7 t6 K
+ z% X# U" o( p
4 |" A" a# G' X& e6 \- P

4 i9 f" \" ~7 R* b. M1 ^+ R

0 x  q! `% @: ~8 K: O2 j, ?$ ^  o+ f

1 \) E- Z, i" I+ w6 G# h
/ J  Q$ y" v1 Z# X$ r3 H(6)Actions:
: A$ H9 v  `& Q  r% t5 s( Z5 m

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


) A  L3 d2 _  R+ _


3 r7 p* a% ?/ ]& Mmutations:{" e* C0 w4 z9 E
      add(state){
! h: s% U' [, x7 j         state.count = state.count + 1;) F4 k. j4 R6 m0 w& n- L2 t2 ~* o
      },
2 ^7 N4 n5 t' i2 X$ _# T$ s      reduce(state){7 W, z) y& \, S+ w% k- z
        state.count = state.count - 1;
$ I$ B9 m0 ?, Q: u' P, v4 C; s% z    }) ?, a/ K+ X5 H: C' I
  },& h$ c5 |& V3 R$ w, Q* V" F3 m
  actions:{
3 M, H4 b( a. [; Y* v  Y8 c4 r      addFunc(context){
  L* j7 a& j; Y1 s7 I2 {          context.commit("add");
- r4 p( ~3 ?/ |1 {* ?      },
( F  K) E& f1 o& [1 L4 e, ^& w# e      reduceFunc(context){4 U4 ~; Q1 @6 C5 B8 e$ {# {
          context.commit("reduce");
- U' D. B( ?' ^" F! f8 p! o      }
" I# C( J2 v; P9 X3 M: t- O% ]* n: p  }
0 K4 C5 i6 J: W' ~8 E
6 q$ ^* K+ N3 H3 j  q' k* t8 l( E


" Z6 d# X$ C$ z5 I/ J- ?( }

; `4 g+ \" O- F& o/ ~* I
  methods:{- c+ m5 u9 o( o* z# V2 ?
    addFunc(){
6 C: w8 Q9 R% r, a, A, [8 Y      //this.$store.commit("add");
8 m! U: j0 b% f1 L# M. i/ Y      this.$store.dispaTCh("addFunc");$ I# F/ c. C4 S, T/ J3 u! g
    },
$ V( U( a5 X2 @0 ^* ?    reduceFunc(){
) s3 W% L/ @/ Z( k      //this.$store.commit("reduce");
: r, L% L6 S6 T3 q7 e6 L       this.$store.dispatch("reduceFunc");
3 V& E4 U! E5 `( a' M    }
# t; a: v' {9 \4 x( ^  }

  l) T/ U2 [1 T* P) x
+ Q" B6 G9 y, s* d
这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的* x0 \# `/ J- k* X' h8 P' S
实现效果一样!!!!4 W8 \& h+ e  I- i/ g6 k( g

5 R5 U2 O. Q9 j$ U4 G% f+ b! k* @
! M1 Q/ Y* A/ V; M
& {( K1 x# k) [9 m
6 k1 d* v% }. t) m8 L


8 i' V+ j( |+ R

0 {6 P* i2 R0 l1 @. ?' h. A

" r3 A/ W0 a, K# Y% q( E+ p9 [

; F5 [5 z  {/ H( ~  A  T
' v" U: O# H  @1 O

) N) D7 g' h! P9 o1 W/ {" z' J

3 p4 }) D) I5 _9 N$ b/ D' c8 s
% A  [$ D8 U! J& I$ T
8 T# b9 D# I( R! t" E8 D6 x* M6 ]

6 W" k& k# U. K: D( `/ j# u& K8 f* O7 F4 r1 @. Q2 Q
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

全部回复1

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
 楼主| 发表于 2019-6-12 15:28:01 | 显示全部楼层

mapState、mapGetters、mapActions

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

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

  q7 [- L: B& C* ^( U


: M' s/ j9 p, G2 Z. |


9 I- N$ f+ t3 z2 d. z

正常显示,效果是一样的,我们就可以不再使用很长的写法来调用了。1 a) I' s, Y! D; I9 A4 P9 b2 j" w

4 L6 d$ L( O" h" C8 G0 ?9 D( z0 simport {mapState,mapGetters,mapMutations} from 'vuex';1 [, T/ @- H! B! N5 s
export default {" M2 d0 h5 H, H4 a# n
  name: 'HelloWorld',; K8 d( l* v6 s; l
  data () {
- _+ F  R4 |, l7 ^    return {% f5 h4 ?& ~4 [4 y/ p5 |
      msg: 'Welcome to Your Vue.js App'
! f- B. f6 n. G/ f( i7 N2 S    }
% d6 b; o* n. h1 w$ E( u  },
. A( k9 O* g) a( V% [4 x$ E  computed:{
7 G1 S  O% V) z" Z' s  I9 |2 O* V    ...mapState({) [: o- q3 `# J
      mapCount:state=>state.count6 P; q0 m# k- P% F6 R$ S
    })
) `) K5 R0 n6 N- V  },# |% ]0 B: _0 U9 g6 c4 D
  methods:{
  Q- F  l4 Z0 `; B4 R9 k2 S" M    addFunc(){
6 U4 B( @4 G" C& I3 j      //this.$store.commit("add");
  X# E2 E; c3 K1 ]      this.$store.dispatch("addFunc");6 R& J/ X6 r: ?( \- B' W3 ?
    },! `& N" b  H7 M0 m0 X/ L& D( M
    reduceFunc(){( B4 d; y) j6 b; N3 j0 X7 r
      //this.$store.commit("reduce");
1 x- J- b, A4 @( y6 u5 h8 W       this.$store.dispatch("reduceFunc");
3 b# {% h& _7 d# [5 D    }8 ?; ?: M3 r- J# |; V" c4 R5 r
  }! u) v9 G; i, u! l
}
# M- q# g: n4 e' c
. N. }+ ]1 g  Z2 x1 W, y1 P" L6 ]* ~

3 g# S! |% E! S$ ~2 p9 N+ q) X9 D0 a3 z. L1 ]6 g2 L: `
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了