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中文網其他相關文章！
