### vuex實例應用 1. src/store/index.js ``` <!-- 需要先引入modules里寫好的JS文件 --> import distributor from './modules/distributor' Vue.use(Vuex) const store = new Vuex.Store({ modules: { distributor <!-- modules下的JS文件名 --> }, getters, strict: false // vuex提示開關，生產模式下要關閉 }) export default store ``` 2. src/getters.js ``` const getters = { basicMessage: state => state.distributor.basicMessage <!-- Vue文件中，computed中return的return this.$store.getters.basicMessage的位置引用的名字 --> } export default getters ``` 3. src/module/distributor.js ``` const basicMessage = { state: { <!-- basicMessage要進行更改的數據 --> basicMessage: '', }, mutations: { <!-- mutations只做數據的傳入 --> GET_SPECIFICATION: (state, info) => { state.basicMessage = info } }, actions: { language({ commit }, info) { <!-- 通過commit去進行觸發，info為傳入的要更改的數據 --> commit('GET_SPECIFICATION', info) <!-- GET_SPECIFICATION通過commit觸發這個mutations里的state的數據進行更改state的basicMessage --> } } } export default basicMessage ``` 4. vue文件下 ``` <template> <input v-model="mytext" placeholder="vuex"> <el-button @click="da" size="mini">確認</el-button> </template> data() { return { mytext: '' } } computed: { <!-- 這里面是從vuex里面取數據出來使用 --> language() { return this.$store.getters.basicMessage } }, methods: { <!-- 這里面是頁面上的數據通過vuex進行修改的位置 --> da() { this.$store.dispatch('language', this.mytext) }, } ``` 5. 檢查 - vue檢查工具，vuex > state > distributor > basicMessage : '', (存入vuex位置的數據) - components > computed (做了vuex修改后的數據位置)