查看: 209|回复: 0
打印 上一主题 下一主题

[Vue] Vue之Vuex的状态管理

[复制链接]
  • TA的每日心情
    开心
    2017-7-5 20:14
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    1698

    主题

    1707

    帖子

    7350

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    7350
    跳转到指定楼层
    楼主
    发表于 2019-7-8 14:13:43 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    一 安装
    1. npm install vuex --s
    复制代码
    二 新建配置
    2.1 新建store/index.js
    1. import Vue from 'vue'

    2. import Vuex from 'vuex'

    3. Vue.use(Vuex);

    4. const store = new Vuex.Store({

    5. ??state:{

    6. ? ? count:1

    7. ??}

    8. })

    9. export default store
    复制代码
    2.2 在main.js进行配置
    1. import store from './store'

    2. new Vue({

    3. ??el: '#app',

    4. ??store,

    5. ??router,

    6. ??components: { App },

    7. ??render: h => h(App),

    8. ??template: ''

    9. })
    复制代码
    2.3 vue中使用
    1. {{this.$store.state.count}}
    复制代码
    三 简单使用
    3.1 store/index.js
    1. import Vue from 'vue'

    2. import Vuex from 'vuex'

    3. Vue.use(Vuex);

    4. const store = new Vuex.Store({

    5. ??state:{

    6. ? ? count:1

    7. ??},

    8. ??getters:{

    9. ? ? getStateCount:function (state) {

    10. ? ?? ?return state.count+1;

    11. ? ? }

    12. ??},

    13. ??mutations:{

    14. ? ? add(state){

    15. ? ?? ?state.count=state.count+1;

    16. ? ? },

    17. ? ? reduction(state){

    18. ? ?? ?state.count=state.count-1;

    19. ? ? }

    20. ??},

    21. ??actions:{

    22. ? ? addFun(context){

    23. ? ?? ?context.commit("add");

    24. ? ? },

    25. ? ? reductionFun(context){

    26. ? ?? ?context.commit("reduction");

    27. ? ? }

    28. ??}

    29. })

    30. export default store
    复制代码
    3.2 App.vue中






    复制代码


    资源帝国 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
    2、本站所有主题由该帖子作者发表,该帖子作者与资源帝国享有帖子相关版权
    3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和资源帝国的同意
    4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
    5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
    6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
    7、资源帝国管理员和版主有权不事先通知发贴者而删除本文

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|资源帝国 ( 皖ICP备14009953号 )?

    GMT+8, 2019-8-11 01:51 , Processed in 0.116097 second(s), 28 queries .

    Powered by Discuz! X3.2

    ? 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表