Vuex的簡單使用

1、安裝vuex

npm i vuex

import vuex from 'vuex'

vue.use(vuex)

import vue from 'vue'import vuex from 'vuex'vue.use(vuex);export default new vuex.store(,  mutations: ,  getters:,   actions: {}})

import store from './store/store'

（1）state

vuex中的資料來源，我們需要儲存的資料就儲存在這裡，可以在頁面通過 this.$store.state來獲取我們定義的資料；

store.js

export default new vuex.store(,})

}

}

如果需要修改state中的值唯一的方法就是提交mutation來修改.

store.js

export default new vuex.store(  },})

+

-get
+10

就是從state中派生出狀態，比如將state中的某個狀態進行過濾然後獲取新的狀態

store.js

export default new vuex.store(      }    }  },

})

getters

actions就是mutation的加強版，它可以通過commit mutations中的方法來改變狀態，最重要的是它可以進行非同步操作。

store.js

export default new vuex.store(, 1000)         });       }      }

})

+1

專案比較複雜的時候，資料全部寫在乙個state ，將會使我們的檔案顯得太過於臃腫，而且不易維護，那怎麼辦呢？

vuex為我們提供了module這樣乙個模組的概念。

store.js

const modulea = ,

mutations: ,
actions: ,
getters: 
}const moduleb = ,
mutations: ,
actions: 
getters: 
}export default new vuex.store(
})//在模組內部使用
state.count //這種使用方式和單個使用方式樣，直接使用就行
//在元件中使用
store.state.a.count //先找到模組的名字，再去呼叫屬性
store.state.b.count //先找到模組的名字，再去呼叫屬性

vuex的簡單使用

使用了 vue lic腳手架 我不說得很理論，我就說得很通俗 在store檔案下面寫成 index.js是載入全部 下面是 modules檔案下的wallet.js export default getters mutations actions src 這是index.js import vue ...

vuex 簡單的使用

首先是專案目錄結構 我的vuex的目錄是這樣的，簡單說一下每個js檔案的作用吧 首先是 index.js 檔案 這個檔案主要配置 vuex 的入口及檔案的配置 import vue from vue import vuex from vuex vue.use vuex import state fr...

vuex的簡單使用

專案結構 一 建立store 建立分割成模組 module 的state 專案 中建立store資料夾，同時建立index.js，在modules中定義userinfo這個state index.js import vue from vue import vuex from vuex vue.use...