Vuex

vuex的介绍及使用

1、介绍：

当多个组件同时依赖于同样的数据的时候，你要给多个组件传递数据，这样就非常的繁杂。结构也非常的混乱。
并且没法实现响应式变化，也就是组件中的数据没法随着源数据的变化而变化。vuex就是一个实现数据共享的插件。
(既然是插件那么它的使用方式为Vue.use(Vuex),当然应该首先导入vuex)

2、使用：

上面是Vuex的使用流程，其实，这些东西是写在一个store(仓库)中，state是共享的数据，他会被渲染到页面。

1）首先，要使用Vuex，就要先下载相应的插件npm i vuex
2)需要创建store
3）在创建的store里面创建actions、mutations、state、getters

import Vuex from 'vuex'

Vue.use(Vuex)

const actions={
    jiaodd(context,value){
        if(context.state.sum%2){
            context.commit('JIA',value) 
        }
    },
    jiawait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
const mutations={
    JIA(state,value){
        state.sum+=value;
    },
    JIAN(state,value){
        state.sum-=value;
    }
}
const state = {
    sum:0,
    school:'尚硅谷',
    subject:'前端'
} 

const getters = {
    bigsum(state){
        return state.sum*10
    }
}
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

上面是创建的store仓库中的代码，下面是组件中的代码，当然如果只是一个组件，完全可以不用vuex，这里只是用一个组件来演示问题。

  <div>
      <h1>当前求和：{{sum}}</h1>
      <h1>当前值的十倍：{{bigsum}}</h1>
      <h1>我在{{school}},学习{{subject}}</h1>
      <select v-model.number='n'>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementodd">点我奇数n加一</button>
      <button @click="incrementwait">等会再加一</button>
  </div>
</template>

<script>
export default {
    name:"Count",
    data(){
        return{
            n:0,
           
        }
    },
    mounted() {
        console.log(this)
    },
    methods:{
        increment(){
            this.$store.commit('JIA',this.n)
        },
        decrement(){
            this.$store.commit("JIAN",this.n)
        },
        incrementodd(){
            this.$store.dispatch('jiaodd',this.n)
        },
        incrementwait(){
            this.$store.dispatch('jiawait',this.n)
        }

    },
    computed:{
        sum(){
            return this.$store.state.sum 
        },
         school(){
            return this.$store.state.school
        },
        subject(){
            return this.$store.state.subject
        },
        bigsum(){
            return this.$store.getters.bigsum
        },
       
}
}
</script>

<style>
    button{
        margin-left: 8px;
    }
</style>

上面这些是最基本的vuex的使用，事件一般是dispatch给actions(如果一开始并不知道需要传入的参数，比如说需要发送ajax请求获取数据，就需要dispatch这一步，先在actions里发送ajax请求,然后再将得到的数据commit到mutation的函数)，如果是比较简单的事件(并且一开始就知道动作和值)，那么可以越过dispatch阶段直接commit到mutation里。就像上面的increment事件和decrement事件。
state中的数据可以在各个组件中共享，插值语法中可以通过{{$store.state.xxx}}获得数据，在组件的computed等函数里，可以使用this.$store.state.xxx来获取数据。
这是最基本的使用，如果是多个组件的时候，actions、mutations、state、getters会保存多个组件中的数据，会比较混乱，所以可以进行模块化处理。