Vue Vuex用法

1.Vuex是做什么的
Vuex是一个专门为Vue.js应用程序开发的状态管理模式
采用集中式存储管理应用的所有组件状态
就是一个能够集中管理组件中数据并完成响应式操作的轮子

2.Vuex的基本用法

//vuex新文件 index.js
import Vue from 'vue'
import Vuex from 'vuex'
//安装插件
Vue.use(Vuex)
const store = new Vue.store({
    state:{
      //保存状态（值）的
        counter:1000  //后面要用的值
    },
    mutations:{
     //操作值的方法
     increment(satate){
        state.counter++
     },
     decrement(satate){
        state.counter--
     },
     getters:{
        powerCounter(state){
            return state.counter * state.counter
        },
        addOne(state,getters){  //可以把getters传进来  第二个不管叫啥都是getters 
            return getters.powerCounter+1
        },
        addNum(){  //别人传入一个值 我加上
           //返回一个操作值的方法后  再在标签上调用
            return num =>{  //给标签返回一个方法
                return state.counter + num
            }
        }
     }
    }
})
export default  store 
//导出store独享

//在main.js中挂载
import Vue  from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

new  Vue({
     el:'#app',
     store,
     render:h => h(App)
})

//在页面使用
<template>
   <div>
      <h2>{{$store.state.counter}}</h2>
      <button @click='addition'>+</button>  //通过监听点击方法修改Vuex里的值
      <button @click='substraction'>-</button>
      
      //通过getter拿平方  
     <h2>{{$store.getter.powerCounter}}</h2> 
     
     //传一个数给Vuex的getter  并于现在的值相加
     <h2>{{$store.getter.addNum(8)}}</h2> 

   </div>
</template>
<script>
 import HelloVuex from './components/HelloVuex'
 
 export default{
   name:'#app',
   methods:{
     addition(){
        this.$store.commit('increment')
        //commit 提交 后面传入的是在Vuex配置中的mutations里面的方法名
     },
     substraction(){
        this.$store.commit('decrement')
     }
   }
 }

</script>

3.插件 vuex-devtools
谷歌插件商店下一个 能监控到Vuex每一步值的改变

4.Vuex 中的mutations的状态更新(传参后改值)

• 最好不要在mutation中做异步操作

• vuex的store状态（state）的唯一更新方式是提交

• mutation可以看成是两部分
  {
  1.字符串的事件类型（方法名）
  2.回调函数 第一个参数是state
  }

• 给mutations传递参数（载荷）

//vuex新文件 index.js
const store = new Vue.store({
    state:{
        counter:1000  //后面要用的值
    },
    mutations:{
        addCount(satate,num){ //通过普通封装传参的取值方法  传的是值
            state.counter += num //num是传递进来的参数
        },
        addCount(satate,payload){ //通过特殊封装传参的取值方法  传的是对象
            state.counter += payload.num//num是传递进来的参数  payload是个参数名 叫啥都行
        }
    }
})

//在页面使用
<template>
   <div>
      <h2>{{$store.state.counter}}</h2> //显示值
      <button @click='addCount(5)'>+5</button> //加num
   </div>
</template>
<script>
 export default{
   name:'#app',
   methods:{
     addCount(num){
        this.$store.commit('addCount',num)  //后面是给mutations传的值   这是一种普通的提交封装
        this.$store.commit({ //特殊的提交封装 这样提交的是个对象
           type:'addCount',
           num  
        }) 
     }
      
   }
 }
</script>

5.Mutation同步函数 （actions）

//vuex新文件 index.js
const store = new Vue.store({
    state:{
        counter:1000 
    },
    mutations:{
      updateInfo(){
        state.counter++
      }
    },
    actions:{ //写异步方法
       aUpdateInfo(context,payloud){//context 上下文  context相当于store payloud是传的参
        return new Promise((resolve,reject) =>{
         setTimeout((context) => {
           context.commit('updateInfo') //通过store调用mutations里的方法修改值  mutations用commit提交      
           resolve("34567890-34567890")
           },1000)
         })
       })
    }
})

//在页面使用
<template>
   <div>
      <h2>{{$store.state.counter}}</h2> //显示值
      <button @click='addCount'>+5</button> //加num
   </div>
</template>
<script>
 export default{
   name:'#app',
   methods:{
    addCount(){
       this.$store.dispatch('aUpdateInfo','payloud').then(res =>{
         console.log(res)   //res是上面promise传的值   可以不用promise
       })  //actions 用dispatch提交   把payloud字符串传递给actions (不是非得传字符串)
    }
   }
 }
</script>

6.关于modules

//vuex新文件 index.js
const moduleA={
  state:{
        num:666
    },
    mutations:{
      updateNum(){
        state.num='hahaha'
      }
    },
    getters:{
       afun(state){
          return state.name+"1234654"
       },
       bfun(state,getter){
          return getters.afun+"00000"
       },
       cfun(state,getter,rootState){ //rootState拿到的是下面的没有被分出来的state
          return getters.bfun+rootState.counter
       }
    },
    actions:{
        aUpdateInfo(context){ 
            //这里的context不是store 是自己的模块
        }
    }
}
const store = new Vue.store({
    state:{
        counter:1000 
    },
    mutations:{
      updateInfo(){
        state.counter++
      }
    },
    modules:{
       a:moduleA  //a会被放到state里
    }
})

//在页面使用
<template>
   <div>
      <h2>{{$store.state.a.num}}</h2> //拿到state需要通过参数名调用
      <button @click='upDateNum'>修改Num</button> //加num  调用modules中的方法直接调用不用通过a调用  
   </div>
</template>
<script>
 export default{
   name:'#app',
   methods:{
    upDateName(){
        this.$store.commit('updateNum')  
    }
   }
 }
</script>