Vue中Vuex的使用

Vuex

1. 单界面到多界面状态管理切换

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloVuex",

}
</script>

<style scoped>

</style>

2. vue-devtools和mutations

• 下载devtools并且让google浏览器加载他

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

<script>
  import HelloVuex from "@/components/HelloVuex";
export default {
  name: 'App',
  data() {
    return {
      message: '我是组件哈哈哈',
    }
  },
  components: {
    HelloVuex
  },
  methods: {
    addition(){
      this.$store.commit('increment')
    },
    substraction() {
      this.$store.commit('decrement')

    }
  }

}
</script>

<style>

</style>

3. state单一状态树的理解

• 总结：
  • 一个项目中，一个store

4. getters

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id:111, name:'why', age: 10},
      {id:222, name:'kobe', age: 20},
      {id:333, name:'lebron', age: 30},
      {id:444, name:'curry', age: 40}
    ]
  },
  mutations: {
    // 方法
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  },
  actions: {
  },
  modules: {
  },
  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)
      }
    }
  }
})

<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(10)}}</h2>






    <h2>---------------- Hello Vuex内容----------------</h2>
    <HelloVuex></HelloVuex>
  </div>
</template>

<script>
  import HelloVuex from "@/components/HelloVuex";
export default {
  name: 'App',
  data() {
    return {
      message: '我是组件哈哈哈',
    }
  },
  components: {
    HelloVuex
  },
  methods: {
    addition(){
      this.$store.commit('increment')
    },
    subtraction() {
      this.$store.commit('decrement')

    }
  }

}
</script>

<style>

</style>

5. mutations

• 想传入一个参数，在提交mutation的时候除了传递mutation中的方法名之外，多传递一个自己想要的参数
• 如果需要传入很多参数，我们可以将参数封装成一个对象，将这个对象传递过去，然后在mutation中使用payload接受！

5.1 Mutation的提交风格

addCount(count){
  //payload:负载
  //1.普通提交风格
  // this.$store.commit('incrementCount',count)

  //2.特殊提交风格
  this.$store.commit({
    type: 'incrementCount',
    count
  })
},

• 此时的payload指的是上面整个type和count

mutations: {
  // 方法
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  },
  incrementCount(state, payload){
    state.counter+=payload.count
  },
  addStudent(state,stu) {
    state.students.push(stu)
  }
},

5.2 数据的响应式原理

• 对于对象、数组，Vue无法检测他们的属性的变化，因此在此时，可以通过Vue.set或者this.$set的方式进行响应式地添加属性

  Vue.set(vm.someObject, 'b', 2)
  this.$set(this.someObject,'b',2)
  

6. actions的使用详解

7. modules的使用详解

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

import {
  INCREMENT
} from "@/store/mutations-types";

Vue.use(Vuex)

const moduleA = {
      state: {
        name: 'zhangsan'
      },
      mutations: {
        updateName(state,payload){
          state.name=payload
        }
      },
      actions: {
        aUpdateName(context) {
          setTimeout(()=>{
            context.commit('updateName','wangwu')
          },1000)
        }
      },
      getters: {
        fullname(state) {
          return state.name+'111111'
        },
        fullname2(state,getters) {
          return getters.fullname + '222222'
        },
        fullname3(state,getters,rootState){
          return getters.fullname2+rootState.counter
        }
      }
    }

export default new Vuex.Store({


  state: {
    counter: 1000,
    students: [
      {id:111, name:'why', age: 10},
      {id:222, name:'kobe', age: 20},
      {id:333, name:'lebron', age: 30},
      {id:444, name:'curry', age: 40}
    ],
    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }
  },
  mutations: {
    // 方法
    [INCREMENT](state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    incrementCount(state, payload){
      state.counter+=payload.count
    },
    addStudent(state,stu) {
      state.students.push(stu)
    },
    updateInfo(state){
      state.info.name='Lebron'
      //错误代码，无法进行异步操作
      // setTimeout(()=>{
      //   state.info.name='lebron'
      // },1000)
      // state.info.name='lebron'
      // state.info['address']='洛杉矶'
      // Vue.set(state.info,'address','洛杉矶')
      //该方式做不到响应式
      // delete state.info.

      // Vue.delete(state.info,'age')
    }
  },
  actions: {
    // aUpdateInfo(context,payload) {
    //   setTimeout( ()=>{
    //     context.commit('updateInfo')
    //     console.log(payload.message);
    //     payload.success()
    //   },1000)
    // }

    aUpdateInfo(context,payload) {
      return new Promise((resolve, reject) => {
        setTimeout( ()=>{
          context.commit('updateInfo')
          console.log(payload)
          resolve(111111)
        },1000)
      })
    }

  },
  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)
      }
    }
  },

  modules: {
    a: moduleA
  }
})

8. store文件夹的目录组织

进行抽取实现简化代码的效果