• 有关vuex


    Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它能够更好的在组件外部管理状态

    重要文件版本。

    每一个 Vuex 应用的和兴就是 store(仓库)。store 基本上就是一个容器,它包含着应用中大部分的状态(state) Vuex 和单纯的全局对象有以下不同:

    1. Vuex的状态储存是响应式的,当 Vue 组件从 store 中读取状态时,若store中的状态发生变化,那么相应的组件也会得到高效更新
    2. 不能直接改变 store 中的状态,改变 store 中状态的唯一途径就是显式的提交(commit)mutation 这样可以更方便的跟踪状态的变化

    vuex中的state、action、mutation的关系。

    state负责存储整个应用的状态数据,要注意在入口文件main.js注入store对象,就可以在根组件下的子组件使用this.$store.state获取状态了。
    
    mutation里面写着改变状态数据的方法(一定要写在这里),mutation是同步事件要注意,里面的方法不能写异步的,组件中触发一个mutation的方法store.commit(mutationName)。
    
    action也是一个改变状态数据的事件,但不同的是action改变状态是通过调用mutation来实现的,注意action是个异步事件。直接触发action就使用this.$store.dispatch(actionName)。

    三,vuex的简单使用

    1,下载安装

    npm install --save vuex
    //注意要带save

    2,src目录下建文件夹和文件结构是src/store/store.js,store.js代码如下:

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increase (state) {
          state.count++
        }
      },
      actions: {
        actionIncrease ({commit}) {
          commit('increase')
        }
      }
    })
    export default store

    3,在入口文件main.js引入,并挂载到根节点

    import Vue form 'vue';
    import Vuex from 'vuex';
    import store from './store/store.js'
    Vue use(Vuex);
    new Vue({
      el: '#app',
      store,
      template: '<App/>',
      components: { App }
    })

    4,子组件调用状态值count,并通过点击触发action提交mutation来增加数值 
    子组件模板:

    <template>
      <span>{{count}}</span>
      <button @click="add">增加数值</button>
    </template>
    <script>
      export default {
        computed:{
          count () {
            return this.$store.state.count;
          }
        },
        methods: {
          add() {
            this.$store.dispatch('actionIncrease')
          }
        }
      };
    </script>
    ok,以上就是vuex的简单使用了,别的组件如需调用或修改vuex的数据状态也依此法使用。
  • 相关阅读:
    Java程序开发必备的6种知识
    Java技术在多数据库系统中的应用研究
    解决J2EE系统应用性能问题常用方法
    在Java中如何跳出当前的多重嵌套循环?
    Java学习是由简入难的学习过程
    浅谈Java SE、Java EE、Java ME三者的区别
    J2ee的学习方法及步骤摘要
    IOS 使用GCD改善性能
    IOS Cell重用机制
    BUG--tomcat更改目录失败
  • 原文地址:https://www.cnblogs.com/wu971023-/p/9239550.html
Copyright © 2020-2023  润新知