vue基础之状态管理vuex

Vuex实现状态管理

背景:Vue状态管理

如何引入VUEX

1.新建index.js文件，用来直接引用VUEX

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

//直接使用VUEX
Vue.use(Vuex)

//创建vuex实例
const store = new Vuex.store({
    
})

export default store

2.在main.js中引入store对象

import Vue from 'vue'
import App from 'App'
import router from './router'
import store from './store'

new Vuew({
    el:'#app',
    store,
    router,
    components:{
        App
    }
    templete:'<App/>'
    
    
})

3. 状态声明和使用

    const store = new Vuex.store({
        state:{
            count:1
        }
    })
    
    
    <h1> {{this.$store.state.count}} </h1>
   

4. getters

   const store = new Vuex.store({
       state:{
           count:1
       },
       getters:{
           getStateCount:function(state){
               return state.count + 1
           }
       }
   })
   
    <h1> {{this.$store.getStateCount}} </h1>
   

如何进行状态管理 (更改数据)

1. 布局如下

    <p>{{this.$store.count}} </p>
    <button @click="add">ADD</button>
    <button @click="minus">MINUS</button>
   

2. 布局对应的逻辑

    methods:{
        add:function(){
            this.$store.commit("add")
        },
        minus:function(){
            this.$store.commit("minus")
        }
    }
   

3. vuex中store对象

    const store = new Vuex.store({
        state:{
            count:1
        },
        getters:{
            getStateCount:function(state){
                return this.$store.state + 1
            }
        },
        mutations:{
              add:function(state){
                state.count = state.count + 1
            },
            minus:function(){
                 state.count = state.count + 1
            }
        }
    })
   

如何优雅的进行状态管理

1. 使用actions

    methods{
        add:function(){
            this.$store.dispatch("addF")
        },
        minus:function(){
        var n = 1;
             this.$store.dispatch("minusF" ,n)
        }
    }
   
   
    const store =  new Vuex.store({
        state:{
            count:1
        },
        getters:{
            getStateCount:function(state){
                return state + 1
            }
        },
        mutations:{
            add:function(state){
                state.count  = state.count  + 1
            },
            minus:function(state,n){
                state.count = (state.count -1)*(n+1)
            }
        },
        actions:{
            addF:function(context){
                context.commit("add")
            },
            minusF:function(context,n){
                context.commit("minus",n)
            }
        }
    })
   

2.如果我们不喜欢这种在页面上使用“this. $stroe.state.count”和“this.$store.dispatch(‘funName’)”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；

<p>{{count1}} </p>

import {mapState,mapGetters,mapActions}from 'vuex'

couputed:{
    mapSate{
        count1:state=>store.count
    }
}