vuex实例详解
- vuex是一個專門為vue.js設計的集中式狀態管理架構。狀態？把它理解為在data中的屬性需要共享給其他vue組件使用的部分。
- 簡單的說就是data需要共用的屬性
一、小demo
- 已經用Vue腳手架工具構建好項目
1、引入vuex
1.安裝vuex
npm n install vuex --save
- 注意：一定要加上--save,因為這個包我們在生產環境中要使用
2.新建store文件夾（不是必須），并在文件夾下新建store.js,文件中引入我們的vue和vuex
import Vue from 'vue'; import Vuex from 'vuex'3.使用我們vuex，引入之后用Vue.use進行引用
Vue.use(Vuex)
2、demo
- 我們這個小demo先聲明一個state的count狀態，在頁面中使用顯示這個count，然后可以利用按鈕進行加減
1.在store.js文件里增加一個常量對象。
const state = {count:3 }2.用export default封裝代碼，讓外部可以引用
export default new Vuex.Store({state })3.在src/components下新建count.vue
在模板中我們引入我們剛建的store.js文件，并在模板中用{{$store.state.count}}輸出count 的值。
<template><div><h2>{{msg}}</h2><h4>{{$store.state.count}}</h4><hr></div></template><script>import store from '@/store/store.js'export default {data(){return {msg: 'Hello Vuex!'}},store}</script>
4.在store.js文件中加入兩個改變state的方法
src/store/store.js
const mutations = {add(state){state.count++;},reduce(state){state.count--;}}這里的mutations是固定的寫法，意思是改變的，我們要改變state的數值的方法，必須寫在mutations里就可以了。
5.在count.vue模板中加入兩個按鈕，并調用mutations中的方法
<div><button @click="$store.commit('add')">+</button><button @click="$store.commit('reduce')">-</button> </div>- 這樣進行預覽就可以實現對vuex中的count進行加減了。
二、state訪問狀態對象
- const state，這個就是我們說的訪問狀態對象，它是我們SPA（單頁應用程序）中的共享值。
count.vue頁面中，這種寫法看著就麻煩
<h4>{{$store.state.count}}</h4><hr>簡便寫法
<h4>{{count}}</h4>- 這樣就好多了可是怎么實現呢？？？
想要實現有三種方法
1.通過computed的計算屬性直接賦值
computed屬性可以在輸出前，對data中的值進行改變，利用這種特性把store.js中的state值賦值給我們模板中的data值
computed:{count(){return this.$store.state.count;}}
2.通過mapState的對象來賦值
1.用import引入mapState
import { mapState } from 'vuex;2.在computed計算屬性寫
computed:mapState{count:state=>state.count}使用ES6的箭頭函數來給count賦值
3.通過mapState的數組來賦值
computed:mapState(['count'])最簡單的寫法，在實際項目開發中經常這樣使用
三、Mutations修改狀態
1、$store.commit()
Vuex提供了commit方法來修改狀態
<button @click="$store.commit('add')">+</button><button @click="$store.commit('reduce')">-</button>store/store.js
const mutations={add(state){state.count++;},reduce(state){state.count--;}}
2、傳值
add方法加上一個參數n
const mutations={add(state,n){state.count+=n;},reduce(state){state.count--;}}在Count.vue里修改按鈕的commit( )方法傳遞的參數，我們傳遞10，意思就是每次加10
<div><button @click="$store.commit('add',10)">+</button><button @click="$store.commit('reduce')">-</button></div>
3、模板獲取Mutations方法
- $store.commit()這樣的方法寫起來麻煩
例如：@click=”reduce” 就和沒引用vuex插件一樣。 - 要達到這種寫法，只需要簡單的兩部就可以了：
1.在模板count.vue里用import引入我們的mapMutations
import { mapState,mapMutations } from 'vuex';2.在模板的script標簽里添加methods屬性，并加入mapMutations
methods:mapMutations(['add','reduce' ])通過上邊兩部，我們已經可以在模板中直接使用我們的reduce或者add方法
<div><button @click="add(5)">+</button><button @click="reduce">-</button></div>
四、getters計算過濾操作
- getters從表面是獲取的意思，可以把他看作在獲取數據之前進行的一種在編輯，相當于對數據的一個過濾和加工。你可以把它看作store.js的計算屬性
1、getters基本用法
比如我們現在要對store.js文件中的count進行一個計算屬性的操作，就是在它輸出前，給它加上10
我們首先要在store.js里用const聲明我們的getters屬性。
const getters = {count(state) {return state.count+=10;}}寫好了gettters之后，我們還需要在Vuex.Store()里引入
export default new Vuex.Store({state,mutations,getters})count.vue
computed:{...mapState(["count"]),count(){return this.$store.getters.count;}}
2 用mapGetters簡化模板寫法
首先用import引入我們的mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex'在computed屬性中加入mapGetters
computed:{...mapState(['count']),...mapGetters(['count'])}
五、actions異步修改狀態
- actions和之前講的Mutations功能基本一樣，不同點是，actions是異步的改變state狀態，而Mutations是同步改變狀態。
1、在store.js中聲明actions
actions是可以調用Mutations里的方法，在actions里調用add和reduce兩個方法
const actions = {addAction(context){context.commit('add',10)},reduceAction({commit}){commit('reduce')}}在actions里寫了兩個方法addAction和reduceAction，兩個方法傳遞的參數不一樣
- context:上下文對象，這里你可以理解稱store本身。
{commit}:直接把commit對象傳遞過來，可以讓方法體邏輯和代碼更清晰明了
2、模板中的使用
<div><button @click="addAction">addAction+</button><button @click="reduceAction">reduceAction-</button> </div>import引入mapActions
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'methods方法
methods:{...mapMutations(['add','reduce']),...mapActions(['addAction','reduceAction'])}
3、增加異步體驗
我們現在看的效果和我們用Mutations作的一模一樣，肯定有的小伙伴會好奇，那actions有什么用，我們為了演示actions的異步功能，我們增加一個計時器（setTimeOut）延遲執行。在addAction里使用setTimeOut進行延遲執行。
const actions = {addAction(context){context.commit('add',10)setTimeout(()=>{context.commit('reduce')},3000)console.log('我比reduce提前執行')},reduceAction({commit}){commit('reduce')}}
count.vue
<template><div><h2>{{msg}}</h2><h4>{{count}}</h4><hr><div><button @click="add(10)">+</button><button @click="reduce">-</button></div><hr><div><button @click="addAction">addAction+</button><button @click="reduceAction">reduceAction-</button></div></div> </template> <script> import store from '@/store/store.js' import { mapState,mapMutations,mapGetters,mapActions } from 'vuex' export default {data(){return {msg: 'Hello Vuex!'}},// computed:{//方法1// count(){// return this.$store.state.count;// }// },// computed:mapState({//方法2// count:state => state.count// })computed:{...mapState(['count']),//方法3// count(){// return this.$store.getters.count;// }// ...mapGetters(['count']) //簡寫},methods:{...mapMutations(['add','reduce']),...mapActions(['addAction','reduceAction'])},store } </script>store.js
import Vue from 'vue'; import Vuex from 'vuex' Vue.use(Vuex);const state = {count:3 } const mutations = {add(state,n){state.count+=n;},reduce(state){state.count--;} } const getters = {count(state) {return state.count+=10;} }const actions = {addAction(context){context.commit('add',10)setTimeout(()=>{context.commit('reduce')},3000)console.log('我比reduce提前執行')},reduceAction({commit}){commit('reduce')} } export default new Vuex.Store({state,mutations,getters,actions })六、module模塊組
- 隨著項目的復雜性增加，我們共享的狀態越來越多，這時候我們就需要把我們狀態的各種操作進行一個分組，分組后再進行按組編寫。
- module:狀態管理器的模塊組操作
- 項目不是很大，一般不用
1、聲明模塊組
store.js
const moduleA={state,mutations,getters,actions}修改原來 Vuex.Stroe里的值：
export default new Vuex.Store({modules:{a:moduleA}})
2、在模板中使用
<h3>{{$store.state.a.count}}</h3>簡寫
<h3>{{count}}</h3>
``
computed:{count(){return this.$store.state.a.count;}},轉載于:https://www.cnblogs.com/DCL1314/p/9530271.html
總結
- 上一篇： webpack中使用jquery
- 下一篇： Vue初体验