溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vuex 漸進式教程，從入門級帶你慢慢深入使用vuex。
Vuex 是什么？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態， 并以相應 的規則保證狀態以一種可預測的方式發生變化。
vuex官網： vuex.vuejs.org/zh/guide/
安裝
安裝vue-cli:
cnpm install -g vue-cli vue init webpack vuex
安裝vuex
cnpm i vuex --save
1.初級使用方法
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex' // 引入vuex
Vue.config.productionTip = false
Vue.use(Vuex);
let store = new Vuex.Store({ // store 對象
state:{
count:0
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //使用store,這可以把 store 的實例注入所有的子組件
components: { App },
template: '<App/>'
})
此時可以在組件中使用 this.$store.state.count 獲取store中state的值。如：
// 在組件的computed中使用
computed:{
count(){
return this.$store.state.count;
}
}
想想一下當項目比較大的時候數據繁瑣，如果按照上述方法使用vuex,當你打開main.js你看的到場景是比較混亂的，各種數據繁雜在一起，不便于日后的維護。請看下一步：
2.中級使用方法： modules 模塊化
state用法
2.1 在main.js中刪除下述這部分代碼
let store = new Vuex.Store({ // store 對象
state:{
count:0
}
})
2.2. 在src目錄下新建store文件夾并在該文件夾下新建index.js文件。 在 store/index.js寫入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
strict:true, // 開啟嚴格模式 確保state 中的數據只能 mutations 修改
state:{
count:0
}
})
export default store;
對應的main.js應該寫入：
import store from './store'
寫到這里，我們在組件里就可以獲取到store里的state的值了
2.3 為了方便測試直接在HelloWorld.vue 中使用store
<template>
<div class="hello">
<h3>{{count}}</h3>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$store.state.count;
}
}
}
</script>
很多時候咱們要對state里的值進行操作，在vuex提供了一個方法mutations
mutations用法(使用mutations可以修改state的值)
在sore\index.js寫入：
//
...
state:{
count:0
},
mutations:{ // 更改數據的方法
add(state){
state.count++
},
//提交載荷用法
// add(state,n){
// state.count += n
// },
sub(state){
state.count--
}
}
...
//
組件(HelloWorld.vue)中使用mutations里對應的方法：
<template>
<div class="hello">
<button @click="add">+</button>
<h3>{{count}}</h3>
<button @click="sub">-</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
computed:{
count(){
return this.$store.state.count;
}
},
methods:{
add(){
this.$store.commit('add');
},
//提交載荷用法
// add(){
// this.$store.commit('add',10);
// },
//對象風格的提交方式
// store.commit({
// type: 'add',
// n: 10
// })
sub(){
this.$store.commit('sub');
}
}
}
</script>
此時就可以對count進行修改了。
當你想異步操作的時候，由于mutation必須是同步的這一點，此時不能采用mutation對state 進行修改。action派上用場了，action就是一個函數集合，在里面怎么操作都可以，只要最后觸發mutation 就可以了。
注解mutation不能異步操作的原因：
mutations: {
add (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
現在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：因為當 mutation 觸發的時候，回調函數還沒有被調用，devtools 不知道什么時候回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。
Action 用法
在sore\index.js寫入：
mutations:{ // 更改數據的方法
add(state){
state.count++
},
sub(state){
state.count--
}
},
++++
actions:{
add(context){ // context 與 store 實例具有相同方法和屬性（但不是store 實例）
setTimeout(()=>{
context.commit('add');
},1000)
}
}
++++
組件(HelloWorld.vue)中使用getters里對應的方法：
<template>
<div class="hello">
<button @click="add">+</button>
++++
<button @click="add_action">action +</button>
++++
<h3>{{count}}</h3>
<button @click="sub">-</button>
<div>
test: {{doneTodos[0].text}} <br>
length: {{doneTodosLength}}
</div>
</div>
</template>
export default {
methods:{
add(){
this.$store.commit('add');
// console.log(this);
},
sub(){
this.$store.commit('sub');
},
++++
add_action(){
this.$store.dispatch('add');
}
++++
}
}
看到這里有沒有想過當我們使用state中某一個數據時，我們只想用該數據中符合條件的數據。比如：
state:{
count:0,
todos: [
{ id: 1, text: 'text1--true', done: true },
{ id: 2, text: 'text2--false', done: false }
]
}
此時我們只想獲取state.todos中done為true的數據時我們應該怎么獲取？
可能會有以下兩種方案:
1.每個在組件中首先獲取todos,然后使用filter方法過濾；
2.寫一個公共函數在每個組件中調用以下；
如果用到todos中done為true的組件很多，這兩種方法都是很不理想的。Vuex為此為我們引入了一個方法Getter。
Getter 用法
官方解釋：Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
在sore\index.js寫入：
mutations:{ // 更改數據的方法
add(state){
state.count++
},
sub(state){
state.count--
}
},
+++
getters:{ // 用法類似組件中的 computed, 可以認為是store的計算屬性
doneTodos:state => { // Getter 接受 state 作為其第一個參數：
return state.todos.filter(todo => todo.done) // -> [{ id: 1, text: 'text1--true', done: true }]
},
// Getter 也可以接受其他 getter 作為第二個參數
doneTodosLength:(state,getters) => {
return getters.doneTodos.length // -> 1
},
+++
}
組件(HelloWorld.vue)中使用getters里對應的方法：
<template>
<div class="hello">
<button @click="add">+</button>
<h3>{{count}}</h3>
<button @click="sub">-</button>
+++
<div>
test: {{doneTodos[0].text}} <br>
length: {{doneTodosLength}}
</div>
+++
</div>
</template>
<script>
export default {
//...
computed:{
+++
doneTodos(){
return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }]
},
doneTodosLength(){
return this.$store.getters.doneTodosLength // -> 1
}
+++
}
}
</script>
本篇代碼地址： github.com/xioasa/vue-…
總結
以上所述是小編給大家介紹的vuex 漸進式教程實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
