31-Vuex

作者: 早起的鸟儿 | 来源:发表于2019-10-31 08:53 被阅读0次

    1.vuex是基于vue框架的一个状态管理库,它采用集中式的存储了所有组件的状态(数据、事件...)
    2.应用场景:大、中型项目
    3.安装

    npm install vuex -S
    

    二、vuex的使用
    1.在App.vue的同级新建文件夹store
    2.在store中新建index.js
    在index.js

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex)
    
    //存储的是数据,相当于之前的data
    const state = {
        num: 5
    }
    //存储事件的,相当于之前的methods
    const mutations = {
        add(state){
            state.num++
        },
        reduce(state){
            state.num--
        }
    }
    export default new Vuex.Store({   
        state,  //名字随意起,对应即可,抛出数据
        mutations  //抛出事件
    })
    

    在main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    ...
    
    new Vue({
      el: '#app',  //是index.html里的id名
      router,  //路由
      store,   //vuex
      components: { App },
      template: '<App/>'   
    })
    

    在其他组件中:

    <div>{{$store.state.num}}</div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
    <!-- state对应store--const定义的名字 -->
    <!-- num--对应数据的名字 -->
    <!-- add也是对应store里边的方法名 -->
    

    相关文章

      网友评论

          本文标题:31-Vuex

          本文链接:https://www.haomeiwen.com/subject/tiwcmctx.html