|
请使用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 e2 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 vMutations: 数据我们在页面是获取到了,但是如果我们需要修改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/ A5 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 |
|