美文网首页
vuex入门

vuex入门

作者: littleStar_up | 来源:发表于2017-08-21 10:24 被阅读0次

    npm install vuex--save 安装(install 后package.json里的dependencies中会有vuex)

    在src文件下添加xuex文件,内添加actions.js,getter.js,store.js

    store.js中引入

    import Vue from 'vue'

    import Vuex from 'vuex'

    import * as actions from './actions'

    import * as getters from './getters'

    Vue.use(Vuex)

    // 应用初始状态

    const state = {

    count: 10

    }

    // 定义所需的 mutations

    const mutations = {

    ADD(val){

    state.count++;

    }

    }

    export default new Vuex.Store({

    actions,

    getters,

    state,

    mutations

    })

    actions.js中添加

    export const add = ({commit}) => {

    commit('ADD')

    }

    getter.js中添加

    export const getCount = state => {

    return state.count;

    }

    main.js中添加

    import vuex from 'vuex'     //引用的模块不用加"./"

    import store from './vuex/store'

    new Vue({ 

     el: '#app', 

     router,

      store

     template: '', 

     components: { App }

    })

    接下来就可以使用啦

    this.$store.dispatch("add");

    this.$store.commit('add')

    this.$store.getters.getCount;

    在github上写了个超级简单的例子https://github.com/littleStar123/vuex

    推荐两个chrome扩展程序

    Vue.js devtools 查看vuex的store

    Insight.io for Github 查看git文件,可下载单个文件

    相关文章

      网友评论

          本文标题:vuex入门

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