vue学习(六)项目基础(3)-Vuex

Vuex

单页面状态管理

多界面状态管理

App.vue

<template>
  <div id="app">
    <h2>{{$store.state.counter}}</h2>
    <button @click = "$store.state.counter++">+</button>
    <button @click = "$store.state.counter--">-</button>
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  data(){
    return{
      message: '我是APP组件',
    }
  },
  components:{
    HelloWorld
  }
}
</script>

<style>

</style>

store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        counter: 1000
    },
    mutations:{

    },
    actions:{

    },
    getters:{

    },
    modules:{

    }
})

export default store

main.js

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

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

HelloWorld.vue

<template>
  <div class="hello-world">
      <h2>{{$store.state.counter}}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() { 
    return {

    }
  }
 }
</script>

<style lang="" scoped>
</style>

Vuex 单一状态树

Getters

store/index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        counter: 1000,
        students:[
            {id:110, name:'why', age:18},
            {id:111, name:'kobe', age:24},
            {id:112, name:'james', age:30},
            {id:113, name:'curry', age:8},
        ]
    },
    mutations:{
        //方法
        increment(state){
            state.counter++
        },
        decrement(state){
            state.counter--
        }
    },
    actions:{

    },
    getters:{
        powerCounter(state){
            return state.counter * state.counter
        },
        more20stu(state){
            return state.students.filter(s => s.age >= 20)
        },
        more20stuLength(state, getters){
            return getters.more20stu.length
        },
        moreAgeStu(state){
            // return function(age){
            //     return state.students.filter(s => s.age >= age)
            // }
            return age =>{
                return state.students.filter(s => s.age > age)
            }
        }
    },
    modules:{

    }
})

export default store

App.vue

<template>
  <div id="app">
    <h2>--------App内容----------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click = "addition">+</button>
    <button @click = "subtraction">-</button>
    

    <h2>--------App内容:getters相关信息----------</h2>
    <h2>{{$store.getters.powerCounter}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLength}}</h2>
    <h2>{{$store.getters.moreAgeStu(20)}}</h2>
    <h2>--------Hello Vuex 内容----------</h2>
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  data(){
    return{
      message: '我是APP组件',
    }
  },
  components:{
    HelloWorld
  },
  computed:{
    more20stu(){
        return this.$store.state.students.filter(s => s.age >= 20)
    }
  },
  methods:{
    addition(){{
      this.$store.commit('increment')
    }},
    subtraction(){{
      this.$store.commit('decrement')
    }}
  }
}
</script>

<style>

</style>

Mutation状态更新