Vue中的组件状态机和仓库
Vuex组件状态机 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <script src="../js/vuex.js"></script> </head> <body> <div id="app"> { {msg}} <hr> { {$store.state.storeMsg}}-----{ {$store.state.name}} <hr> { {$store.getters.nameUpper}} <hr> <!-- commit 提交突变 --> <button @click="$store.commit(changName,lisi)">提交突变</button> <!-- dispatch 动作分发--> <hr> <button @click="$store.dispatch(getName,lisi33333)">动作分发</button> <hr> { {storeMsg}}----{ {name}} ----{ {nameUpper}} <hr> <button @click="changName(lisi)">提交突变</button> <!-- dispatch 动作分发--> <hr> <button @click="getName(lisi33333)">动作分发</button> </div> <script> // import {mapActions,mapMutations} from vuex let {mapActions,mapMutations,mapState,mapGetters} = Vuex // 配置仓库对象 let storeCon = { // 初始化声明属性 项目中公共的属性 state:{ storeMsg:状态机的msg, name:zhangsan, // stusInfo:[] }, // 可以获取到state中声明的属性，并且能够进行处理再返回 getters:{ nameUpper(state){ return state.name.toUpperCase() } }, // 突变 修改state中的数据仅能在mutations里面进行 payload载荷 参数 mutations:{ changName(state,payload){ console.log(mutations,payload); state.name = payload } }, // 动作 可以异步请求接口 actions:{ getName(context,payload){ console.log(actions,context); context.commit(changName,payload) } } } // 状态机 仓库对象 let store = new Vuex.Store(storeCon) let vm = new Vue({ el:#app, data:{ msg:"hello" }, computed:{ // 辅助函数 // ...Vuex.mapState([name,storeMsg]), // ...Vuex.mapGetters([nameUpper]), ...mapState([name,storeMsg]), ...mapGetters([nameUpper]), }, created(){ console.log(store,this.$store); console.log(store,this.$store.state); console.log(getter,this.$store.getters); console.log(8888,this.changName); console.log(9999,this.getName); }, methods:{ // ...Vuex.mapMutations([changName]), // ...Vuex.mapActions([getName]), ...mapMutations([changName]), ...mapActions([getName]), }, // 注册仓库 store:store }) </script> </body> </html> Vuex中的仓库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> <script src="../js/vuex.js"></script> </head> <body> <div id="app"> { {msg}} <hr> { {$store.state.msg}} <hr> { {$store.state.aModule.amsg}}---{ {$store.state.bModule.bmsg}} <hr> { {$store.state.aModule.name}}---{ {$store.state.bModule.name}} <hr> { {name}} ---{ {bname}} <hr> { {amsg}} --- { {bmsg}} </div> <script> let { mapActions, mapMutations, mapState, mapGetters } = Vuex // 初始化 小仓库 设置配置项 let aModule = { namespaced: true, state: { amsg: amsg数据, name: a小仓库 } } let bModule = { namespaced: true, state: { bmsg: bmsg数据, name: b小仓库 } } // 状态机 仓库对象 大仓库 let store = new Vuex.Store({ modules: { aModule, bModule }, state: { msg: msg数据, } }) let vm = new Vue({ el: #app, data: { msg: "hello" }, computed: { // 辅助函数 // ...mapState([name,storeMsg]), // ...mapGetters([nameUpper]), ...mapState(aModule, [name,amsg]), // ...mapState(bModule, [name]), // b小仓库 重命名 第二个参数为对象 属性名为新名字，属性值为原来的属性名 ...mapState(bModule, { bname:name, bmsg:bmsg }), }, created() { console.log(this.$store.state); }, methods: { // ...mapMutations([changName]), // ...mapActions([getName]), }, // 注册仓库 store: store }) </script> </body> </html>