### 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修改后的数据位置)