|
请使用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# X7 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, O7 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
|
|