vuex简单介绍-官网

 

  vuex为状态管理器,主要用于全局状态管理,方便组件间的状态共享。其主要涉及Store、Mutation、Action、Getter

 

vuex思想:
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态的独立性,代码更结构化且更易维护。
state:用来数据共享数据存储
mutation:用来注册改变数据状态
getters:用来对共享数据进行过滤操作
action:解决异步改变共享数据


state 驱动应用的数据源   view 以声明方式将state映射到视图  actions 响应在view上的用户输入导致的状态变化


每一个vuex应用的核心就是store仓库,即一个容器,其包含着应用中的大部分的状态state。
vuex的状态存储是响应式的:当vue组件从store中读取状态时,若store中的状态发生变化,则相应的组件也会相应地得到高效更新。
不能直接改变store中的状态:改变store中状态的唯一途径即是显示地提交mutation。


state:
vuex使用单一状态树,即一个对象包含了全部的应用层级状态,唯一数据源,每一个应用仅包含一个store实例。
vuex状态存储是响应式的,从store实例中读取状态最简单方法是在计算属性中返回某个状态:



Getter:
    getter的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生了改变才会被重新计算。
    const store = new Vuex.Store({
        state:{
            todos:[
                {id:1, text:'dd', done:true},
                {id:2, text:'d2d', done:false}
            ]
        },
        getters:{
            doneTodos:state => {
                return state.todos.filter(todo => todo.done)
            }
        }
    })
    通过属性访问:store.getters.doneTodos,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的
    通过方法访问:getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果
    getters:{
        getTodoById:(state)=>(id)=>{
            return state.todos.find(todo=>todo.id===id)
        }
    }
    store.getters.getTodoById(2)
    
mapGetters辅助函数:仅是将 store 中的 getter 映射到局部计算属性
    import {mapGetters} from 'vuex';
    export default {
        computed:{
            ...mapGetters(['count','amount'])
        }
    }
    ps:若将getter属性领取一个名字,使用对象形式:
    mapGetters({
    count:newCount
    })


mutation:
    更改vuex的store中的状态的唯一方法是提交mutation,每个mutation都有一个字符串的事件类型type和一个回调函数handler,
    handler即是实际进行状态更改的地方,且接受state作为第一个参数。
ps: 最好提前在store中初始化所有所需属性;新添加属性如想具有响应式,则推荐使用Vue.set(obj,'newProp,123)或 vm.$set(target,key,value)或者以新对象替换老对象,
如state.obj={...state.obj, newProp:123}
mutation 必须是同步函数


action
    Action 提交的是 mutation,而不是直接变更状态。
    Action 可以包含任意异步操作
    const store = new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            increment(state){
                state.count++
            }
        },
        actions:{
            increment(context){
                context.commit('increment')
            }
        }
    })
    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 
    来获取 state 和 getters。
    Action 通过 store.dispatch 方法触发:store.dispatch('increment')
    store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise
    一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}


由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用非常复杂时,store会很臃肿。=》出现了将store分割成module,每个module拥有自己的state/mutation/action/getter及
子模块。
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态


computed:{
   ...mapGetters(['memberInfo'])
},
methods:{
   ...mapActions(['GetInfo', 'GetShopList']),
}


// state
// getters 批量导出state中的值
// action提交mutation    
// store.dispatch触发action操作

  

参考 & 感谢:vuex官网 & 各路大神

转载于:https://www.cnblogs.com/haimengqingyuan/p/11415677.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex是Vue.js应用程序开发的状态管理库,它能够帮助我们更好地组织和管理Vue应用程序中的状态。Vuex的核心概念是store,它类似于一个全局的容器,存储着应用程序中的各种状态(state),并提供了一些方法(mutations、actions、getters)来访问和操作这些状态。 下面是一个简单Vuex示例,假设我们有一个计数器应用程序,需要实现加和减功能: 1. 首先,安装Vuex并在main.js中引入: ```javascript import Vuex from 'vuex' Vue.use(Vuex) ``` 2. 创建一个store并定义初始状态: ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, decrement(state) { state.count-- } }, actions: { incrementAsync({commit}) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount(state) { return state.count } } }) ``` 3. 在组件中使用store: ```javascript <template> <div> <p>Count: {{count}}</p> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementAsync">+ Async</button> </div> </template> <script> export default { computed: { count() { return this.$store.getters.getCount } }, methods: { increment() { this.$store.commit('increment') }, decrement() { this.$store.commit('decrement') }, incrementAsync() { this.$store.dispatch('incrementAsync') } } } </script> ``` 在上面的示例中,我们定义了一个状态count和三个方法increment、decrement和incrementAsync,分别用来增加、减少和异步增加计数器的值。我们还定义了一个getter来获取当前的计数器值。在组件中,我们通过computed属性来获取count值,并通过methods属性来调用对应的方法,其中commit方法用来提交一个mutation来修改状态,dispatch方法用来触发一个action来异步修改状态。 以上就是Vuex的使用核心和一个简单案例。如果您还有其他的问题,欢迎继续向我提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值