Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。

vuex有哪幾種屬性

有五種，分別是State、 Getter、Mutation 、Action、Module

state => 基本數據(數據源存放地)

getters => 從基本數據派生出來的數據

mutations => 提交更改數據的方法，同步！

actions => 像一個裝飾器，包裹mutations，使之可以異步。

modules => 模塊化Vuex

a) 在vue組件里面，通過dispatch來觸發actions提交修改數據的操作。

b) 然后再通過actions的commit來觸發mutations來修改數據。

c) mutations接收到commit的請求，就會自動通過Mutate來修改state（數據中心里面的數據狀態）里面的數據。

d) 最后由store觸發每一個調用它的組件的更新

Vuex的作用：項目數據狀態的集中管理，復雜組件(如兄弟組件、遠房親戚組件)的數據通信問題。

Vue組件（action里面的dispatch）---》actions（方法commit）---》mutations（Mutate）---》state（getter）---》store更新所有調用vuex的組件（Vue Component組件）

mapState輔助函數computed: mapState([// 映射 this.count 為 store.state.count'count' ])相當于 computed:{count(){ return this.$store.state.count } }computed: mapState({// 箭頭函數可使代碼更簡練count: state => state.count,// 傳字符串參數 'count' 等同于 `state => state.count`// countAlias : state => state.count,countAlias: 'count',// 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數countPlusLocalState (state) {return state.count + this.localCount} })通過屬性訪問的：const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {doneTodos: state => {return state.todos.filter(todo => todo.done)},doneTodosCount: (state, getters) => {return getters.doneTodos.length}} })//使用方法 computed: {doneTodosCount () {return this.$store.doneTodos // [{ id: 1, text: '...', done: true }]} }還有一種情況，自帶getter參數的 //使用方法 computed: {doneTodosCount () {return this.$store.getters.doneTodosCount //2} }通過方法訪問的：（注意，getter 在通過方法訪問時，每次都會去進行調用，而不會緩存結果）const store = new Vuex.Store({state: {todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]},getters: {getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)}} })//使用方法 computed: {doneTodosCount () {return this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }} } mapGetters函數import { mapGetters } from 'vuex'export default {// ...computed: {// 使用對象展開運算符將 getter 混入 computed 對象中...mapGetters(['doneTodosCount','anotherGetter',// ...])} } //相當于 export default {// ...computed: {doneTodosCount:this.$store.getters.doneTodosCount,anotherGetter :this.$store.getters.anotherGetter } }mutation特點

每個 mutation 都有一個字符串的事件類型 (type)和 一個回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數：

const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {// 變更狀態state.count++}} })// ... mutations: {increment (state, n) {state.count += n} }store.commit('increment', 10)

總結

以上是生活随笔為你收集整理的getter方法的作用 vuex_Vuex的工作流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。