vue状态管理vue-vux使用

最新推荐文章于 2022-02-09 11:31:00 发布

转载最新推荐文章于 2022-02-09 11:31:00 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LiangHuang/p/6440671.html

文章标签：

#javascript #ViewUI

本文详细解析了Vue状态管理工具Vuex的核心概念，包括state数据管理、getters数据获取、mutations数据更新、actions异步操作及modules模块化管理等内容，并介绍了如何在Vue项目中有效运用这些功能。

一.state --- 数据

简单使用
1.Vue.use(Vuex)
2.注入,new vue({
el:...
store,
...
})
3.然后在所有组件中可以通过$store.state.xxx获取,动态数据,通过computed可以实时更新

二.getters --- 获取数据 (局部或默认状态,其他getter,根状态)

对state中的数据过滤或者计算
getters:{
    todoDone:state=>{
        return state.todos.filter(todo=>todo.done)
    },
    将todos遍历,每条为todo传入匿名函数,返回todo.done为真的那条
    todoDoneLength:(state,gettrers){
        renturn getters.todoDone.length
    }
    接受getters作为第二参数,使用getters后的数据
}

三.Mutations --- 数据更新 (局部或默认状态,载荷)

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      // 变更状态 不能使用异步函数的回调
      state.count=state.count+payload.data
    }
  }
})

然后
store.commit("increment",{
    data:10
})
或者
store.commit({
type:"increment",
payload:{}
})

触发事件,更改数据,payload载荷,设置为对象更易读

四.actions --- 可以异步执行mutations

(类store,通过参数解构{state,rootState,commit},内部直接使用,不用带context)
(一般在组件中就只调用actions)

在actions内放置异步函数,然后触发mutation内的事件
actions:{
    increment (context){
        context.commit("increment")
    }或者
    increment ({commit}){
        commit("increment")
    }
}
context是一个与store实例相同的对象
{commit}是通过参数结构将context中的commit方法当做参数传入

通过store.dispatch("increment")

*通过promise等组合actions,即一个actions调用完后调用下一个actions事件

五. modules --- 模块化状态树

类似于vue的模块使用方法

const module_a={
    state:{},
    mutations:{}...
}

var store = new Vuex.Store({
    modules:{
        a:module_a,
        b:module_b
    }
})

然后通过store.state.a.count 访问数据
mutation 和 getter :  第一个参数是模块的局部状态
action : context.state 是局部状态，根节点的状态是 context.rootState
getter : 根状态会作为第三个参数

命名空间---因为mutations等都是全局的,所以通过将变量名设为来设置命名空间
如:

const TDONE = "TODO/DONE"
然后 type form xxx.js
[type.TDONE] (state) {
...
}

其他

一.表单处理

v-model绑定如果是引用类,就会在修改value时,直接修改state
解决:

通过set,get方法
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

转载于:https://www.cnblogs.com/LiangHuang/p/6440671.html