vuex详解

image.png

• 在vue中我们通过vuex来管理状态，该值一但被修改，所有引用该值的地方都会自动更新
  项目的src文件下的store文件中新建一个index.js文件如下：

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({

})
export default store

• 然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

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

State

• vuex的数据源，在页面获取需要使用this.$store.state来获取state数据

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({
    state:{
          count:1
    }
})
export default store

• 在页面就可以使用this.$store.state.count来获取数据
  还可以这样写

<script>
import { mapState, mapMutations} from 'vuex'

export default{
computed:{
     // ...mapState(['count'])   
    // ...mapState({
     //     total:'total'
   //  })
     // 推荐使用这种
      ...mapState({
          count:(state)=>state.count
    })
 }
}
<script>

Getters

• Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果.

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({
    state:{
          count:1
    },
getters:{
     getStateCount:function(state){
         return state.count+1
      }
    }
})
export default store

• 在页面获取使用this.$store.getters.getStateCount
  使用辅助函数后 在行间就可以使用这个key值 getStateCount，来读取了

   import { mapGetters} from 'vuex'
   export default{
     computed:{
          // 取值一定要在computed中，getter和state都要在计算属性中
         //    ...mapGetters(['getStateCount'])
          ..mapGetters({
                 getStateCount:'getStateCount'
            })
      }

}

Mutations

• 如果想更改state的值如何修改，使用mutations

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({
    state:{
          count:1
    },
  getters:{
       getStateCount:function(state){
           return state.count+1
         }
     },
    mutations: {
         AddCount(state) {
              return (state.count +=1)
       },
        ReduceCount(state) {
              return (state.count -= 1)
       }
}
})
export default {
 store,
 mutations,
 getters

}

• 那在界面如何调用mutations呢？

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="AddClick(10)">增加</button>
      <button @click="ReduceClick(10)">减少</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations} from 'vuex'

export default{
methods: {
...mapMutations({
       'AddCount':'AddCount',
       'ReduceCount':'ReduceCount'
    })
    handleAddClick(n){
         // 第一种方式
         // this.$store.commit('AddCount');
          // 第二种方式
         this.AddCount()
    },
    handleReduceClick(n){
      //  this.$store.commit('ReduceCount');
      this.ReduceCount()
    }
  }
}
<script>

Actions

• 通过mutations达到了修改store中状态值的目的，但是，官方并不推荐我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({
    state:{
          count:1
    },
  getters:{
       getStateCount:function(state){
           return state.count+1
         }
     },
    mutations: {
         AddCount(state,n) {
              return (state.count +=n)
       },
        ReduceCount(state,n) {
              return (state.count -= n)
       },
   actions :{
       AddCount100(context, n ) {
             context.commit('AddCount', n)
    },
     ReduceCount100(context, n {
            context.commit('ReduceCount', n)
    }
}
}
})
export default {
 getters,
  state,
  mutations,
  actions
}

• 所以点击触发方法可以改为：

<template>
  <div class="hello">
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="AddClick(10)">增加</button>
      <button @click="ReduceClick(10)">减少</button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations ，mapActions} from 'vuex'

export default{
methods: {
// ...mapActions(['AddCount100','ReduceCount100'])
...mapActions({
       'AddCount100':'AddCount100',
       'ReduceCount100':'ReduceCount100'
})
...mapActions({
   
})
    handleAddClick(n){
     var  n=10;
     //  this.$store.dispatch('AddCount100',n)
     this.AddCount100(n)
    },
    handleReduceClick(n){
       var  n=10;
       // this.$store.dispatch('ReduceCount100',n)
       this.ReduceCount100(n)
    }
  }
}
<script>