vue之vuex介绍/使用/实例分析vuex流程

责编:menVScode 2017-12-15 17:33 阅读(848)

vuex是什么

        专为Vue.js应用程序开发的状态管理模式

        采用集中存储管理应用的所有组件的状态

        以相应的规则保证状态以一种可预测的方式发生变化

状态

        组件内部状态: 仅在一个组件内使用的状态(data字段),不能共享;

        应用级别状态:多个组件公用的状态

什么情况下使用Vuex

        多个视图依赖同一状态

        来自不同视图的行为需要变更同一状态

使用Vuex

        安装vuex模块

npm install vuex --save

        作为插件使用

import Vue from 'vue'
Vue.use(Vuex)

        定义容器

new Vuex.Store()

        注入根实例

import store from './store'
new Vue({
    store
})

Vuex核心概念

        store:类似容器,包含应用大部分状态; 一个页面只能只能有一个store;状态存储是响应式的;不能直接改变store中的状态,唯一途径显示的提交mutations。

        State:包含所有应用级别状态的对象

        Getter:在组件内部获取store中状态的函数

        Mutations:唯一修改状态的事件回调函数。

        Action:包含异步操作、提交mutation改变状态

        Modules:将store分割成不同的模块

加减功能demo

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        addNum(state){
            state.count +=1
        },
        minusNum(state){
            state.count -=1
        }
    }
})
export default store   

main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/app.css'

import store from './store'

Vue.config.productionTip = false

import Utile from './lib/utils'
Vue.use(Utile)//引用插件

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

 /src/components/Increment.vue

<template>
    <div>
        <h2>加减</h2>
        <button @click="addHandle">+</button>
        <span>{{num}}</span>
        <button @click="minusHandle">-</button>
    </div>
</template>
<script>
    export default{
        computed:{
            num(){ 
                return this.$store.state.count
            }
        },
        methods:{
            addHandle(){
                //改变状态,只需提交mutation中的addNum
                this.$store.commit('addNum')
            },
            minusHandle(){
                this.$store.commit('minusNum')
            }
        }
    }
</script>  

        通过 this.$store.state 获取容器中的状态数据;

        改变store中状态,只需提交mutation中对应方法,利用 this.$store.commit( mutations方法 )。

        this.$store.commit( mutations方法 )还能在传递一个参数,代码如下

methods:{
    addHandle(){
        //改变状态,只需提交mutation中的addNum
        this.$store.commit('addNum',3)
    },
    minusHandle(){
        this.$store.commit('minusNum')
    }
}

        mutatoins对应的addNum方法也要接收参数,代码如下修改

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        addNum(state,n){
            state.count +=n
        },
        minusNum(state){
            state.count -=1
        }
    }
})      

        this.$store.commit( mutations方法 )中传递多个参数的时候,建议用 {},键值对方式来传。 

methods:{
    addHandle(){
        this.$store.commit('addNum',{n:3})
    }
}

        this.$store.commit( {} )中也可以用对象来提交。

methods:{
    minusHandle(){
        this.$store.commit({
            type:'minusNum',
            min:5
        })
    }
}

        mutatoins对应的minusNum方法代码如下修改

mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
    addNum(state,n){
        state.count +=n
    },
    minusNum(state,payload){
        state.count -= payload.min
    }
}

        与本文 mutatoins 相关的文章(必看):http://menvscode.com/detail/5a353031a7833e528ca883dd


标签: vuex state mutations
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码