你不知道的vuex ?

什么是Vuex?

来看官方介绍: > Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 > 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 > Vuex 也集成到 Vue 的官方调试工具 devtools extension, > 提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

安装:

script 引入,在进入vue.js后引入vuex会进行自动安装

    <script src="./js/vue.js"></script>
    <script src="./js/vuex.js"></script>

    NPM
    npm install vuex --save

    Yarn
    yarn add vuex
在一个模块化的打包系统中,必须通过Vue.use() 来安装
improt Vue from 'vue'
improt vuex from 'vuex'
Vue.use(vuex)

const store = new vuex.store({
    state:{
        //全局状态。
    }
});
在main.js中引入,在根组件中注入。
该store实例会注入到根组件下的任意子组件,且子组件直接使用this.$store就能访问到。
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

核心概念:

一、State:

单一状态树

vuex使用单一状态树——用一个对象就包含了全部的应用层级的状态。至此它是唯一,一个数据源而存在。
这样,也就意味着所有的应用包含了一个store实例。

new vuex.store({
    state:{
        count:0
    }
})
//让我们在vue组件中获得vuex的状态:
const vueComponent = {
    template: '<div>{{count}}</div>',  //  0
    computed:{
        count() {
            return this.$store.state.count;
        }
    }
}

这样在$store.state.count发生变化的时候,会重新求取计算属性,并且触发关联的DOM。

mapState辅助函数:

当一个组件要获取多个状态值时,将这些状态都声名为计算属性,显的重复和冗余。
为了解决这个问题我们使用mapState辅助帮助我们生成多个计算属性,让你简单优雅。
来看:

const vueComponent{
    template:`
        <div>
            <h1>{{selfCount}}</h1>  //  0
            <h1>{{strCount}}</h1>   //  0
            <h1>{{handleCount}}</h1>   //  1
        </div>
    `,
    data(){
        retrun {
            localCount: 1
        }
    },
    computed:mapState({
        //直接获得store中的状态,可直接使用箭头函数
        selfCount:state=> state.count
        //也可以直接使用字符串传参,等效于 state=> state.count
        strCount: 'count',
        //为了能够使用`thsi`,获得该组件实例,必须使用常规函数
        handleCount(state) {
            return state.ccount + this.localCount;
        }
    })
}
当需要映射的计算属性与state的子节点名称相同时,或者要重命名时。
我们可以给mapState传入一个字符串数组。
computed:mapState([
    //this.count映射为this.$store.state.count
    'count'
])
对象展开运算符:

mapState函数返回的是一个对象。我们怎么让他与局部计算属性混合使用呢? 这里,我们需要用工具函数件多个对象合并,传给computed。
但有了对象展开运算符。我们可以及其简化它。

computed:{
    sumCount() {
        return //
    },
    ...mapState({
        count: state=> state.count,
        strCount: 'count',
        sumLocalCount(state) {
            return this.localCount + state.count;
        }
    })
}

官方提示:
组件仍然保有局部状态使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。
虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。
如果有些状态严格属于单个组件,最好还是作为组件的局部状态。
你应该根据你的应用开发需要进行权衡和确定。

二、Getters:

有时候我们需要对store的state进行汇总/过滤。

computed:{
    doneTodosCount() {
        return this.$store.state.filter(todo=>todo.done).length;
    }
}

如果组件需要多次使用到此属性,我们要复制这个函数。或者在共享函数导出,
效果并不是很理想。
Vuex允许我们定义getters属性,它就像是 state的计算属性一样。
getters的返回值会根据它的依赖被缓存起来,一旦它的依赖值发生变法就会重新计算。
Getters接受state做为第一个参数:

const store = new vuex.store({
    state: {
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
        ]
    },
    getters: {
        doneTodos: state=>{
            return state.todos.filter(todo=>todo.done);
        }
    }
})
通过属性访问:

Getters会暴露store.getters对象,你可以通过这种方式访问它:

const vueComponent = {
    template:'<div></div>',
    created() {
        console.log(this.$store.getters.doneTodos)  //  { id: 1, text: '...', done: true }
    }
}

Getters也可以作为第二个参数:

getters: {
    doneTodosCount(state,getters) {
        return getters.doneTodos.length;
    }
}
在组件中使用:
const vueComponent = {
    created() {
        console.log(this.$store.getters.doneTodosCount) //   1
    },
    //使用计算属性
    computed: {
        doneTodosCount() {
            return this.$store.getters.doneTodosCount;
        }
    }
}
通过方法访问:
你也可以通过方法访问,让getters返回一个函数,来实现给getter传参。
getters: {
    getTodoById(state,getters)=>(id)=>{
        return state.todos.find(todo=> todo.id === id)
    }
}
在组件中使用:
const vueComponent = {
    created() {
        console.log(this.$store.getters.getTodoById(2))  //{ id: 2, text: '...', done: false }
    }
}
mapGetters辅助函数:

mapGetters仅仅是将store中的getters映射到局部的计算属性中

import { mapGetters } from 'vuex';
export default {
    computed:{
        ...mapGetters([
            'doneTodosCount',
            'doneTodos'
        ])
    }
}
如果你想起一个别名,
computed: {
    ...mapGetters({
        //把this.doneCount映射为,this.$store.getters.doneTodosCount
        doneCount: 'doneTodosCount'
    })
}

这里需要注意的是,使用对象展开符号后,并不能像mapState使用常规函数,仅仅重命名。

三、Mutation:

更改vuex的store中的唯一方法是提交mutation。vuex中的mutation非常类似于事件:每个
mutation都有一个字符串的类型事件(type)和一个回调函数(handler)。
这个回调函数就是我们实际进行状态更改的地方,并且它会接收state作为第一个参数:

const = store new vuex({
    state: {
        count:0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

这里你不能直接调用mutations 的handler,这个更像是事件注册:当触发一个类型为increment
的 mutations时,调用函数。当要唤醒mutations的事件时我们需要用store.commit()方法:

const vueComponent = {
    created() {  //参考
        this.store.commit('increment');
    }
}
提交载荷:

你可以向store.commit()传入额外参数,即mutations的载荷:

const store = new vuex({
    ...
    mutations: {
        increment(state,num){
            state.count + num;
        }
    }
})
组件中提交:
   this.store.commit('increment',10)
在大多数情况下载荷应该时一个对象,这样包含对个字段并记录的mutations会更易读:
  mutations: {
        increment(state,payload){
            state.count+payload.amount
        }
    }
组件中提交:
   this.store.commit('increment',{
        amount: 10
    })
对象风格的提交方式
提交mutations的另一种方式直接包含type属性
   store.commit({
        type: 'increment',
        amount: 10
    })
当使用对象风格的提交方式,整个对象都作为载荷传给 mutation 函数,因此 handler 保持不变:
mutations: {
    increment (state, payload) {
        state.count += payload.amount
    }
}
辅助函数mapMutations:
同样的你可以时使用辅助函数:
methosd:{
    ...mapMutations([
        'increment'  //将this.increment()映射为this.store.commit('increment') 它也可以提交载荷this.increment(amount);
    ]),
    ...mapMutations({
        add: 'increment'   //将this.increment()映射为this.store.commit('increment') 
    })
}
**一条重要的原则就是要记住 mutation 必须是同步函数,详情请参考官方。**

四、 Action:

Action类似与mutations,不同在于:
Action提交的是mutations,而不是直接更改state.
Action可以包含任意的异步操作。
我们来注册一个 简单的Action

const store = new Vuex({
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count++;
        }
    },
    actions: {
        increment(countext){
            countext.commit('increment')
        }
    }
})

Actions函数接受一个与store实例具有相同方法和属性的context对象,
因此你可以context.commit() 提交一个mutations。
或者通过context.getters和context.state。来获取他们。
实际中我们可以通过es5来简化它:

actions: {
    increment( { commit } ){
        commit('increment');
    }
}
使用Actions:
this.$store.dispatch('increment')
actions同mutations支持载荷对象提交方式:
1载荷:
this.$store.dispatch('increment',{
    sum:10
})
2以对象形式
this.$store.dispatch({
    type: 'increment',
    sum:10
})

它也异步调用API,和多重的mutations。包括同级的actions的dispatch。

mapActions辅助函数:
const vueComponent = {
    methods: {
        ...mapActions([
            'increment'   //this.increment映射为 this.$store.dispatch('increment');
        ]),
        ...mapActions({
            post: ''increment'   //将 this.post 映射为 this.$store.dispatch('increment');
        })
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值