原则:
中小型项目中，如果组件的公共状态不多的情况下，不建议使用vuex，反而会增加代码复杂度，想要组件通信，直接通过event bus即可，中大型项目中，多个组件公共状态较多情况下，建议使用vuex
vuex的具体工作流程如下:
在仓库state中定义公共状态，action中发送异步请求，得到数据后调用mutation 赋值给state,组件中使用state,也可以在组件中 dispatch action和触发mutation来修改state,视图刷新
具体代码如下：
仓库代码
const store = new Vuex.Store({
state: {
items: [] // 定义一个公共的购物车数据
},
getters: {
// 可以基于已有的state 派生新的状态
selectedItems (state) {
// 过滤购物车中未选中的商品
return state.items.filter(item => item.selected)
}
},
mutations: {
// 定义mutation来修改state
INIT_ITEMS(state, items){
state.items = items
}
},
actions: {
// action可以发送异步请求，得到数据后commit mutation将请求结果传入
FETCH_ITEMS({commit}, params = {}){
// 调用封装好的 接口函数
fetchItem(params).then(res => {
if(res.data.code === 200) {
commit('INIT_ITEMS', res.data.data)
}
})
}
}
})
组件中使用 使用vuex
// 获取state
this.$store.state.items // 直接获取
{
computed: {
...mapState(['items']) // 助手函数获取
}
}
// 获取getters
this.$store.getters.selectedItems // 直接获取
{
computed: {
...mapGetters(['selectedItems']) // 助手函数获取
}
}
// 组件中提交action
this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'})
{
methods: {
...mapActions(['FETCH_ITEMS']) // 助手函数 直接调用this.FETCH_ITEMS(params)触发
}
}
// 组件中也可以直接commit mutation
this.$store.commit('INIT_ITEMS'[,参数])
{
methods:{
...mapMutations(['INIT_ITEMS']) // 助手函数 直接调用this.INIT_ITEMS(参数)
}
}
京公网安备 11010802030320号