|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
Vuex 的用法详解9 Q; v+ P, r7 S1 u' q) @1 R7 }
. a) _& H! S! r9 h, r& {6 ~
本案例测试下Vuex的使用,创建一个新的web项目+ D$ d- m$ ^/ m B' i$ R4 o! A
Vue init webpack web
! B0 |! @! H2 x安装vuex7 x: q9 O( |/ W
npm install vuex --save* G' w% d6 C. h5 u2 D' d- U
启动, npm run dev,打开localhost:8080 即可
3 v# `! |, W I* _8 i! z9 K2 W* g3 v! H6 X+ u, c J1 w
4 N! o, b. h8 x& G7 k' u- k0 r
(1)引入vuex
% a6 ?/ P( d( M; w! s创建一个src/store文件夹,创建index.js , 引入并导出store
5 v* B5 H& Y4 ?/ _& i2 ?import Vue from 'vue'
$ c P4 c: V T( g0 Z$ x) vimport Vuex from 'vuex'3 u) R8 K: C) x. C( E, p
Vue.use(Vuex);& c0 A: V* e* Y" w4 f, H
const store = new Vuex.Store({% g* w& f# P$ L+ ?
})" M+ I- D8 X" E2 q" v0 c5 E
export default store;
5 Y6 q8 i3 x9 g
8 v# l5 F& ]' [* ~( A# O(2)引入store到main.js
# c+ @. R+ W9 a; @4 \& _import Vue from 'vue'
$ ~% k1 m/ @4 bimport App from './App'
. U$ ~; t* M/ m/ b' Mimport store from './store'
* e0 C& h [6 g: Z8 }( w
3 \. J4 M1 ~2 v! w9 `7 IVue.config.productionTip = false5 [3 ?& V: U3 @+ |. b/ k& ]! _
. Q' q4 L3 H( Q1 T' [7 V
/* eslint-disable no-new */" O& P) w4 [) }4 l
new Vue({
( x8 `* I; }4 n: {. G+ f el: '#app',
9 v% i/ X9 N5 m- G K store,
. j3 N+ S2 n |0 Y- R components: { App },+ M9 g" P+ f- P0 p- A& K# b
template: '<App/>'
- S' i2 o' ]8 ^})
6 d7 d( g7 s& }- L% r8 ^' {! s+ F
3 z( R/ g. |" j' M1 C# t2 r4 ^+ Y' [7 R7 X4 k2 u
4 W' R) T! d( K" c5 I' S% `0 b& ?
(3) 修改 helloword.vue ,先使用state获取值进行测试" B" l8 X: k# B6 y9 c
State: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;( x5 D$ U S* Q( K( j& g5 ^; \
const store = new Vuex.Store({
& @' i+ P6 e) L state: {; t5 X6 z: F- O! u& n% N
count:1
8 d3 E0 u$ }& m. f/ ] }
" Z0 Z( l9 a' m/ r+ ~: r9 J}); {5 h. y! p1 e
) e6 c3 h9 {3 K3 o5 s
helloword.vue----
6 `1 S ]0 f+ `% i. v<template>/ L% E% y: O6 Y$ |$ y( q
<div class="hello">" T- V' y1 _/ V4 T, t
+ b1 q% Y( I1 H$ X+ ]; k <h2>{{this.$store.state.count}}</h2>4 q# b8 n0 i) T7 y) d5 ?
$ T8 `' ^7 }/ v; C </div>: |6 U8 {+ H6 c0 z9 U: N/ V3 p3 \
</template> t. c3 a4 l7 \! Q6 J
7 Y0 M, d2 g* F3 _& {+ b& f2 O8 m5 T* `; R
显示结果为: 1
! F2 o3 F9 O4 O6 m
0 Q. _. M, i0 {1 S- B0 D5 h0 w" E* j3 d5 G* a3 q' c
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:
5 C4 s' ~. f% `) v1 d: _# s: `/ N J$ P* e( r
const store = new Vuex.Store({
" s" I. L. |7 w; ]( _- @ state: {0 r6 {. T' {+ n4 z- D
count:1
" `9 G" I7 w' D8 f },
6 l0 ^8 V7 K" }% L p getters:{; K$ u- l8 Y. o" ?6 o0 ]* w/ i, L$ A7 I
getStateCount:state=>{
/ p1 c6 S. X1 H# A return state.count + 1;
0 q: _( a+ z( c2 y d. b3 D) K! V }
+ E& p8 b) U+ ^( q1 N6 ~ }) s: y5 Y$ }9 E8 j
})9 X( X+ J8 d' R0 [, U. v
?! F3 ]: c% S( X& m/ |3 H- Q
<template>( i7 f) ?3 W3 d, Y
<div class="hello">3 r W4 _" g7 y- P8 T- a6 W' t
- _# a, N3 l4 m) v. }7 B/ f/ ~ <h2>StateValue: {{this.$store.state.count}}</h2>2 |" q: [& s2 }& o; d9 ?) h [
<h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
2 _9 R, I" b/ N! @$ {/ y" S* M7 A, ? </div>/ b! x3 n. u7 L; k9 t
</template>* v9 a0 D1 z/ i4 |
. b- X- S9 R9 r# z" x) a
# e- K5 i- k( [4 I1 _9 F- j( Z显示结果:
" y7 }3 n% |' k [StateValue: 1GettesVaule: 2
t# Y( F/ Y5 f3 r9 `; Q1 v+ t2 I7 {9 Q2 }
(5)
2 O3 p0 t1 u* i% @: X5 b4 }# _Mutations: 数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,我们现在Hello World.vue文件中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值: * g7 r) l9 G9 W6 |1 b
修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:
5 G' j6 b3 Z c& Imutations:{
8 J$ O$ ]9 J# f0 z, {/ r7 t8 C0 B% p add(state){' A9 L/ | `% R* e* K
state.count = state.count + 1;: d9 A8 e# g2 q0 U( c9 E
},8 y- C' X6 h |
reduce(state){
8 N9 R+ x( [) p7 p state.count = state.count - 1;' ^6 p4 ^: {5 i3 v p% ^! e+ u2 U
}
. f0 b" i* t e( @$ L& ]7 b: F }
" {6 ^) C8 x0 H0 z4 H<template>
8 F+ X9 k0 v8 y3 a7 L) f <div class="hello">& \+ U; i1 q S( Q. d7 {$ h9 r' l
<h1>Actions:</h1>
2 v& s: p3 k& E, M$ v4 l0 M <el-button type="primary" @click="addFunc()">Add</el-button>
3 X0 F0 C% Y/ C6 a7 S! t <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>
/ e$ J* Q) V [1 | <h2>StateValue: {{this.$store.state.count}}</h2>
8 t& q* `2 x" ^, u% N4 F4 r1 G- L% l <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
& s+ i, S1 o9 E: U! H" _ </div>8 j! y( U1 {+ {! s5 C1 K0 B# Q; v4 Q
</template>7 q) [- [0 x8 _# {8 F8 d
) \# q& L+ u7 Y5 S& }: _! I- S4 p! ? w, l
结果:6 m& e n( |& v, {" k; B
7 L5 _+ w* u+ p4 {9 C/ S2 M# G. _3 E( s$ _) S- m; q1 F1 @
Actions:Add ReduceStateValue: 5GettesVaule: 6
! P+ P: R/ G s% n5 w) e( i4 f! _' m3 b; g7 P7 q1 t" a
- R- {$ C9 Q1 ^) e: t+ l# {2 S; v/ g0 |! j
) {0 R i! C5 u5 w% n- y% D
: m$ p$ c3 u4 V7 ?5 k: S
3 ]) w0 i# H6 ]3 G: ?
! w/ b# C8 f, D8 K. L
$ l; [) M E- q7 y a: B
! ?1 {8 ]! K0 W! w( h(6)Actions:
2 \3 |) b/ h/ ]9 h- @6 N我们看到,当点击三次后值从2变成了-1;页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不介意我们这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:
& h) @1 u7 v4 Y; p. e$ Q ' q O; n, _4 ?2 U w' K
mutations:{1 E0 g0 c! [) m
add(state){
# A0 L, R! |6 B) y* B( M state.count = state.count + 1;+ @" K u. \. k }8 G$ o
},$ `( V$ Z0 B' H
reduce(state){2 P- a$ m; W3 ^: d
state.count = state.count - 1;
- c6 o+ W' J1 Y6 `3 D0 k& i }
& V$ R+ A; H. n, i: f3 a8 f },
/ _: O/ i0 G/ `: z' [; n) n actions:{
# e |0 m' }& m9 f) S; ^ addFunc(context){
! m" y+ ~' R; }' a T+ v- m# `: V context.commit("add");
) d" n; ~6 `' n% k( n2 _" t },
% y& X! W" q. B. c* {7 F8 ?7 T reduceFunc(context){
3 j/ i# t5 u9 l* @# d1 K0 I5 l context.commit("reduce");
`9 C2 Z. n0 o) h, R }
2 I% s N! o6 ?% e' e: p( I- O" E }
5 \" d3 S5 \. L+ R* j2 i+ g
) J# [ `4 ~; K' J" r& p2 ^- z8 p! u/ I9 ]! }8 j
1 X' L, d( Q6 {3 ~
methods:{: }2 U$ G4 Z) r7 ?* f# |
addFunc(){
. T* q5 x( V7 U+ T6 y5 s //this.$store.commit("add");
5 s& ?8 m! r" ` V( B) F& \4 s. ? this.$store.dispaTCh("addFunc");
8 |, u+ v; Q6 u' f& O },
# Y7 [4 ~2 _" |8 _7 G reduceFunc(){
. Z' o* o: S- _* d; b! ~ //this.$store.commit("reduce");, P8 _# n3 I: `2 p; p
this.$store.dispatch("reduceFunc");, R1 e! f! y# l) {( n
}
8 ]1 `6 e" Z$ X3 }) K3 I$ z: c+ w) V }
, b1 M. s9 s) j+ g( A; a$ G! h5 I, O: O9 z: F: T. D& x
这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的8 K: @' H, O. t1 X
实现效果一样!!!!
, Q& J8 y- t; \# s6 c
2 q# c& {# k( T6 ^% t9 B1 }8 @) L! o k5 [$ P8 ]
2 w( l8 N7 i# m! C# P% E
# _1 G) m I) L$ P: t* j2 G3 q9 C( O5 w5 o7 ]$ p. f
" u& R) @; ~" A, P7 s# [% T1 E' t% x# N2 P1 G+ }
' i+ a+ Y k: t' C- o
m; k0 Y8 F! W3 n% q0 N2 v, ]) n4 U
& h9 D2 C7 m+ X: n
# F B: s1 Z- }$ l
& c4 j3 s' L0 G+ F8 ]. P+ `- o6 d8 f4 r) H
5 |0 o. K* G" b' r
6 k+ { D2 J1 L' g3 @ |
|