Vuex最简单的理解

第一节：

第一步：安装
cnpm i vuex -S

第二步：导入
import Vuex from 'vuex'
Vue.use(Vuex)

第三步：创建了一个对象

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  modules: {...}
})

此时你会发现main.js里面会有导入的第三步，并且还在最底部加了你这个组件store

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

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

---

第二节：实例并演示其作用

第一步：创建两个页面A和B
然后在app.vue中显示这两个组件

<template>
    <div>
        <Ax></Ax>
        <Bx></Bx>
    </div>
</template>


<script>
    import a from "./components/a.vue"
    import b from "./components/b.vue"
    export default{
        data(){
            return{...}
        },
        components:{
            'Ax':a,
            'Bx':b
        }
    }
</script>

第二步：共享数据
将总部$store中state里的的num获取共享数据

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <button>+1</button>
    </div>
</template>

第三步：按需导入
之前需要xx里的xx的xx，新的方法一个就够了
首先安装这个，名字不能改
import {mapState} from 'vuex'
然后展开运算符，把你要现实的东西放进去
(就是把mapState装一个塑料袋，袋子里就是普通的数组)

export default{
        data(){
            return{
                
            }
        },
        computed:{
            ...mapState(['num'])
        }
    }

此时你会发现只需用一个足够了
{{num}}

重点是这个纯属个人爱好！喜欢哪种自己选！别强制让别人选择

---

第三节：mutionss的第一种方式

他跟methods其实很像，但是作用不一样
首先创佳一个方法，参数就是楼上的state！函数中获取state的num赋以加加

export default new Vuex.Store({
  state: { num:0 },
  mutations: {
      add(state)
      {
          state.num++
      }
  }
})

然后在A创建一个点击事件。把事件放入这个已经做好的东西
切记！！！！！
是 $store.commit
不是state的commit

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <button @click="addClick">+1</button>
    </div>
</template>

<script>
    export default{
        methods:{
            addClick()
            {
                this.$store.commit('add')
            }
        }
    }
</script>

如果想添加更多参数，就在原本的后面起一个名字。

export default new Vuex.Store({
  state: {
      num:0
  },
  mutations: {
      addN(state, sb)
      {
          state+=sb
      }
  }
})

然后加一个4就行了

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <button @click="addClick">+1</button>
    </div>
</template>

<script>
    export default{
        methods:{
            addClick()
            {
                this.$store.commit('addN', 4)
            }
        }
    }
</script>

第四节：mutions的第二种方式

第一步：在使用页面添加
import {mapMutations} from 'vuex'

第二步：导入他的函数要在methods

<script>
    export default{
        data(){
            return{ ... }
        },
        methods:{
            ...mapMutations(['add'])
            add()
            {
                this.add()
            }
        }
    }
</script>

如果想和楼上一样做一个不常值那就这样就行

<script>
    import {mapMutations} from 'vuex
    export default{
        data(){
            return{ ... }
        },
        methods:{
            ...mapMutions(['add']),
            add()
            {
                this.add(333333)
            }
        }
    }
</script>

第五节 actions

mutations中不让使用异步，比如这个虽然看上去没问题，但是在审查元素中state变得不同步了。
这样是错误的

 mutations: {
      add(state)
      {
          setTimeout(()=>{
              state.num++
          })
      }
  }

正确的做法应该是这样

export default new Vuex.Store({
  state: {...},
  mutations: {
      add(state)
      {
          state.num++
      }
  },
  actions: {
      addAsync(a)
      {
          setTimeout(()=>{
              a.commit('add')      
          }, 3000)
      }
  }
})

methods: {
    addClick() {
        this.$store.dispatch('addAsync')
    }
}

总结：首先在mutations里面带走你准备使用的事件(add)，
然后在actions中创建一个新事件(addNew),addNew(a){...}当做是新的事件，把你之前mutation的全部目录借过来，此时就成了
addNew(a){ setTimeout(()=>{ a.commit(add) })}
然后再A.vue创建点击事件sb(){ this.$store.dispatch(addNew) }就行了。好记的方式就是dispath倒挂金钩来个c就是 dispatch

还有一种方式就是 携带参数！跟刚才一样，只不过多了一个码而已

export default new Vuex.Store({
  state: {...},
  mutations: {
      add(state, sb)
      {
          state.num+=sb
      }
  },
  actions: {
      addAsync(a, sb)
      {
          setTimeout(()=>{
              a.commit('add', sb)      
          }, 3000)
      }
  }
})

methods: {
    addClick() {
        this.$store.dispatch('addAsync', 5)
    }
}

<button @click="addAsync">+1</button>

第六节 actions的第二种使用方法

先用这个引入，然后把你放入的3插进去就OK了。不需要再创建一个新的点击触发

import { mapActions } from 'vuex';
export default {
    data() {
        return {...}
    },
    methods: {
        ...mapActions(['addAsync'])
    }
}

<button @click="addAsync(3)">+1</button>

第七节 Getter

其实是一个包装的作用，就像computed一样

export default new Vuex.Store({
  state: { num:0 },
  getters:{
      exts(state)
      {
          return `你真是一个大笨大${state.num}|
      }
  }
})

1. <h3>{{$store.getters.exts}}</h3>
2. 第二种很简单，跟上面的一样

import { mapGetters } from 'vuex'    
computed:{ ...mapGetters(['exts'])  }       

<h3>{{exts}}</h3>

getters:{} 就是computed的新名字
module:{} 就是组件用的