Vuex

1、State單一狀態(tài)數(shù)

//store/index.js
const store = new Vuex.Store({
    state:{
        counter:200
    },
    
})
//app.vue
<h2>{{$store.state.counter}}</h2>
//200

2、getters基本使用

獲取state變異后的狀態(tài)

//store/index.js
const store = new Vuex.Store({
    state:{
        counter:200
    },
    getters:{
        qCounter(state){
            return state.counter * state.counter
        }
    }
})
//app.vue
<h2>{{$store.getters.qCounter}}</h2>
//40000

• getters傳參

const store = new Vuex.Store({
    state:{
        counter:200,
        students:[
            {id:110,name:"xxx1",age:10},
            {id:111,name:"xxx2",age:15},
            {id:112,name:"xxx3",age:20},
            {id:113,name:"xxx4",age:25}
        ]
    },
    getters:{
        qCounter(state){
            return state.counter * state.counter
        },
        more20stu(state){
            return state.students.filter(s => s.age >=20 )
        },
        more20stuLenght(state,getters){
            return getters.more20stu.length
        },
        moreAgeStu(state){
            return function(age){
                return state.students.filter(s => s.age >= age)
            }
        }
    }
})

//app.vue
    <h2>{{$store.getters.qCounter}}</h2>
    <p>{{$store.getters.more20stu}}</p>
    <p>{{$store.getters.more20stuLenght}}</p>
    <p>{{$store.getters.moreAgeStu(15)}}</p>

image.png

3、mutations基本使用

Vuex的store狀態(tài)的更新唯一方式：提交mutation

//store/index.js
const store = new Vuex.Store({
    state:{
        counter:200
    },
    mutations:{
        // 方法
        increment(state){
            state.counter++
        },
        decrement(state){
            state.counter--
        }
    }
})

//app.vue
    <button @click="addclick">+</button>
    <button @click="subclick">-</button>

export default {
  name: 'App',
  components:{
    HelloTest
  },
  data(){
    return {
    }
  },
  methods:{
    addclick(){
      this.$store.commit('increment')
    },
    subclick(){
      this.$store.commit('decrement')
    }
  }
}

• mutations 傳參

//store/index.js
const store = new Vuex.Store({
    mutations:{
        // 方法
        incrementCount(state,count){
            state.counter += count
        }
    }
})

//app.vue
export default {
  methods:{
    addcount(count){
      this.$store.commit('incrementCount',count)
    }
  }
}
<h2>{{$store.state.counter}}</h2>
<button @click="addcount(5)">+5</button>

mutaition 不可進(jìn)行異步操作

4、Action的基本定義

用來(lái)替代mutation進(jìn)行異步操作

//app.vue
<h2>{{$store.state.info}}</h2>
<button @click="updataInfo">修改信息</button>

export default {
    methods:{
    updataName(){
      this.$store.commit('updataName',"lili")
    }
  }
}
// index.js
const store = new Vuex.Store({
  mutations:{
        // 方法
        updateInfo(state){
            state.info.name ="lxz0026"
        }
    },
    actions:{
        aUpdataInfo(context,payload){
            return new Promise((resolve ,reject) => {
                setTimeout(()=>{
                    context.commit('updateInfo');
                    console.log(payload);
                    resolve("111")
                },1000)
            })
            
        }
    }
})

5、Modules的基本定義

模塊化

//moduleA.js

export default {
    state:{
        name:"moduleA"
    },
    mutations:{
        updataName(state,payload){
            state.name = payload;
        }
    }
}

//index.js
import moduleA from './modules/moduleA'
const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules:{
        a:moduleA
    }
})

//app.vue
<h2>{{$store.state.a.name}}</h2>
<button @click="updataName">module修改名字</button>

<script>
export default {
  methods:{
    updataName(){
      this.$store.commit('updataName',"lili")
    }
  }
}
</script>