Vuex是一个专门为Vue.js应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题(解决了不同组件之间的数据共享) 2.组件里面数据的持久化 小项目不建议用vuex vuex的使用 1.在src目录下新建vuex文件夹 2.vuex文件夹里面新建一个store.js 3.安装vuex npm install vuex --save 4.在刚才创建的store.js引入vuex并且use.vuex ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ``` 5.定义数据 ``` // state 在vuex中用于存储数据 var state = { count: 1 } ``` 6.定义方法 ``` // mutations里面话的是方法,方法主要用于改变state里面的数据 var mutations = { incCount () { ++state.count } } ``` // 7.有点类似计算属性,改变state里面的count数据的时候会触发 // getters里面的方法,获取新的值(基本用不到) ``` var getters = { computedCount: (state) => { return state.count * 2 } } ``` // 8.Action类似于mutation,不同在于: // Action提交的是mutation,而不是直接变更状态 // Action 可以包含任意异步操作 ``` var actions = { // 因此你可以调用context.commit提交一个mutations incMutationsCount (context) { // 执行mutations里面的incCount方法,改变state里面的数据 context.commit('incCount') } } ``` 暴露 ``` // 实例化Vuex.Store const store = new Vuex.Store({ state, mutations }) export default store ``` ***** 组件里使用vuex ``` 1.引入store `imprt store from '../vuex/store' ` ``` 2.注册 ``` export default { data () { return { msg: '我是一个home组件' } }, store, methods: { count(){ this.$store.commit('incCount') } } } ``` 3.获.取state里面的数据 ``` this.$store.state.数据 ``` 4.触发 mutations改变state里的数据 ``` this.$store.commit('incCount') ``` 5.触发actions里的方法 ``` this.$store.dispatch('incMutationsCount') ``` 6.获取getters里面方法返回的数据 ``` {{this.$store.getters.computedCount}} ```