1.Vuex是什么？
Vuex是實作組件全域狀態(資料)管理的一種機制，可以方便的實作組件之間資料的共享，
2.使用Vuex統一管理狀態的好處
- 能夠在vuex中集中管理共享的資料，易于開發和后期維護
- 能夠高效的實作組件直接得資料共享，提高開發效率
- 儲存在vuex中的資料都是回應式的，能夠實作資料與頁面的同步
3.什么樣的資料儲存在Vuex中
一般情況下，只有組件之間共享的資料，才有必要儲存在vuex中，對于組件的私有資料，依舊儲存在自身的data中即可，
4.下載和使用Vuex
- 下載
npm install vuex -S //S代表生產環境使用
- 匯入vuex包
這個是在main.js中匯入
import Vuex from 'vuex'
Vue.use(Vuex)
- 創建store物件
const store = new Vuex.Store({
state:{count:0} //state中存放的就是全域共享的資料
})
- 將store物件掛載到vue實體中
new Vue({
el:"#app",
render:h => h(app), //渲染app和組件
router, //掛載路由
store
})
5.Vuex的核心概念
- State
- Mutation
- Action
- Getter
State: 提供唯一的公共資料源，所有共享的資料都要統一放到Store的State中進行儲存
// 創建store資料源，提供唯一的公共資料
const store = new Vuex.Store({
state:{count:0}
})
mutations: mutations里面是如何更改state中狀態的邏輯，更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)，
actions: 因為mutations中只能是同步操作，但是在實際的專案中，會有異步操作，那么actions就是為了異步操作而設定的，這樣，就變成了在action中去提交mutation，然后在組件的methods中去提交action，只是提交actions的時候使用的是dispatch函式，而mutations則是用commit函式，
Getter: 有時候我們需要從 store 中的 state 中派生出一些狀態，例如對串列進行過濾并計數，此時可以用到getters，getters可以看作是store的計算屬性，其引數為state，
const store = new Vuex.Store({
state: {
todos: [
{id: 1, text: 'reading', done: true},
{id: 2, text: 'playBastketball', done: false}
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done);
}
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/44785.html
標籤：其他