vuex是解決vue組件和組件間相互通信而存在的,vuex理解起來稍微複雜,但一旦看懂則即為好用:
安裝:
npm install --save vuex
引入
import Vuex
console.log(Vuex) //Vuex为一个对象里面包含Vuex ={ Store:function Store(){}, mapActions:function(){}, // 对应Actions的结果集mapGetters:function(){}, //对应Getters的结果集mapMutations:function(){}, //对应Mutations的结果集mapState:function(){}, //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex'; import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理
//store为实例化生成的import store from './store' new Vue({ el: '#app', store, render: h => h(App) })
//./store文件const store = new Vuex.Store({ state: { //放置state的值 count: 0, strLength:"abcd234" }, getters: { //放置getters方法 strLength: state => state.aString.length }, mutations: { //放置mutations方法 mutationName(state) { //在这里改变state中的数据 state.count = 100; } }, // 异步的数据操作 actions: { //放置actions方法 actionName({ commit }) { //dosomething commit('mutationName') }, getSong ({commit}, id) { api.getMusicUrlResource(id).then(res => { let url = res.data.data[0].url; }) .catch((error) => { // 错误处理 console.log(error); }); } } }); export default store;
import {mapState} from 'vuex'export default { //组件中 computed: mapState({ count: state => state.count }) }
import {mapGetters} from 'vuex'export default { computed: mapGetters(['strLength']) }
export default { methods: { handleClick() { this.$store.commit('mutationName') } } }
import {mapMutations} from 'vuex'export default { methods: mapMutations(['mutationName' ]) }
import {mapActions} from 'vuex'//我是一个组件export default { methods: mapActions(['actionName', ]) }
//写在./store文件中import createLogger from 'vuex/dist/logger'const store = Vuex.Store({ ... plugins: [createLogger()] })
以上是談談我對vuex的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!