vuex是什么:就是用来存放所有组件数据的仓库 语法 引入vuex库 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@2.0.0/dist/vuex.js"></script> const store = new Vuex.Store({ // 单词大小写注意留心 // 仓库数据(状态 state 其实就是单个组件data) sex:1 state: { 键1:值1,...,键n:值n }, // 仓库数据过滤 if == 1 男 女 getters: { 方法名(state) {},.... }, // 更新仓库数据(推荐方法名 get/set仓库中的键 // 更新state语法:state.键 = 值 mutations: { 方法名(state [,参数]) {},.... }, // 异步请求->调用mutations更新state数据 // 触发mutations语法:context.commit(mutations方法名 [,参数]) actions: { 方法名(context) {},.... } }) state&getters都是在computed里面调用 -> 接着视图使用计算属性语法显示 mutations&actions都是在methods里面调用 -> 接着视图触发事件调用方法即可 使用 // 创建store对象通过 Vuex.Store const store = new Vuex.Store({ // 存放状态 state: { age: 19, name: 'Jack' }, // 过滤状态 getters: { username(state) { return `hello ${state.name}` } }, // 更新状态(commit触发) mutations: { setAge(state) { state.age += 1 } }, // 调用mutation(dispatch触发) actions: { setAge(context) { context.commit('setAge') } } }) const vm = new Vue({ // 激活 store, el: '#app', data: { sex: "男" }, // 通过computed来获取state和getters computed: { age() { return this.$store.state.age }, username() { return this.$store.getters.username } }, // 通过methods来存数据 -> 就是触发actions和mutations methods: { // this.$store.dispatch(actions方法名, 参数) // this.$store.commit(mutations方法名, 参数) testActionsFn() { this.$store.dispatch('setAge') // 触发actions }, testMutationsFn() { this.$store.commit('setAge') // 触发mutations } } })