|  | 
 
| 
Vuex 的用法详解% G, ]  C8 i; J
x
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!您需要 登录 才可以下载或查看,没有账号?注册 
  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' C4 ~, 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的函数: ' ^1 Z, V; @+ g8 I6 c  f7 Z1 L2 a, \0 s1 ?8 k: a
 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. l5 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
 
 | 
 |