zoukankan      html  css  js  c++  java
  • vuex学习笔记

    vuex

    vuex是什么?Vuex是一个专为Vue.js应用程序开发的状态管理模式,其工作模式如图所示。刚开始这张图可能很难看懂,但是理解完vuex的五大核心概念(state,getters,mutations,actions,modules)以后,你应该会有自己的理解。

    vuex使用需要挂载到vue实例上,这样就可以在所有组件中使用这些数据,所以我们将所有需要共享的data,使用vuex来统一管理。一般都将src下面的store文件夹中的index.js作为入口文件(文件夹及文件名自定义),然后在main.js中导入store对象。

    每个应用将仅仅包含一个store实例。在根组件注册时,store实例时会被注入到根组件下面的所有组件。所有子组件都可以通过this.$store访问到。

    
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    //sotre
    import store from "./store";
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })
    
    

    State

    可以看作为data中的属性,State中所有的属性都会被加到响应式系统中。即当监听到了属性的变化,就会通知所有用到这个属性的界面进行刷新。

    我们在store文件夹下创建一个modules文件夹用来存放各个不同的模块,创建一个test文件夹及test.js用来测试。

    test.js

    
    const state = {
      message:"Hello VUEX!"
    };
    export default {
      state
    };
    
    

    修改index.js入口文件

    index.js

    
    import Vue from 'vue';
    import Vuex from 'vuex';
    import test from './modules/test/test';
    
    Vue.use(Vuex);
    export default new Vuex.Store({
      modules: {
        test
      }
    });
    
    
    

    添加完成后就可以在vue中调用

    App.vue

    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>{{$store.state.test.message}}</div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    并可以再调试工具中看到相应变量

    Getters

    有时候我们需要从state派生出来一些其他状态,类似于它的计算属性。

    如我们需要将state.message字符串翻转的功能,我们无需在很多地方复制这个函数,也无需抽取到一个公共函数中然后在多处导入。我们只需要定义一个getter。然后就和计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    test.js

    
    const state = {
      message: "Hello VUEX!"
    };
    
    const getters = {
      reversedMessage: state => {
        return state.message.split('').reverse().join('')
      }
    };
    
    
    export default {
      state,
      getters
    };
    
    
    

    App.vue -> template

    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>{{$store.state.test.message}}</div>
        <div>{{$store.getters.reversedMessage}}</div>
      </div>
    </template>
    
    

    Mutations

    提交Mutation是更改store中状态的唯一方式。使用store.commit提交的时候可以传入额外的参数,称为mutation的载荷(payload)。
    Mutation 必须是同步函数。当是异步函数的时候,当mutation触发了,回调函数可能还没被调用,所以在回调函数中的改变将无法追踪。

    test.js

    • 添加一个Mutation用来改变message的值。
    
    const state = {
      message: "Hello VUEX!"
    };
    
    const getters = {
      reversedMessage: state => {
        return state.message.split('').reverse().join('')
      }
    };
    
    const mutations = {
      changeMessage: (state, s = "") => {
        state.message += s
      }
    };
    
    export default {
      state,
      getters,
      mutations
    };
    
    
    

    App.vue -> template

    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>{{$store.state.test.message}}</div>
        <div>{{$store.getters.reversedMessage}}</div>
        <div>
          <button v-on:click="handleClick('Hello!')">Say Hello!</button>
        </div>
      </div>
    </template>
    
    

    App.vue -> script

    
    <script>
      export default {
        name: 'App',
        methods: {
          handleClick(s) {
            this.$store.commit('changeMessage', s);
          }
        }
      }
    </script>
    
    

    • 点击一次按钮后

    Actions

    如果处理异步操作就需要用到Action。Action不同于mutation,它提交的是mutation,而不是直接改变状态。

    test.js

    
    const state = {
      message: "Hello VUEX!"
    };
    
    const getters = {
      reversedMessage: state => {
        return state.message.split('').reverse().join('')
      }
    };
    
    const mutations = {
      changeMessage: (state, s = "") => {
        state.message += s
      }
    };
    
    const actions = {
      actionsChangeMessage: (context, s = "") => {
        context.commit('changeMessage',s)
      }
    }
    
    export default {
      state,
      getters,
      mutations,
      actions
    };
    
    
    

    App.vue -> template

    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>{{$store.state.test.message}}</div>
        <div>{{$store.getters.reversedMessage}}</div>
        <div>
          <button v-on:click="handleClick('Hello!')">Say Hello!</button>
          <button v-on:click="handleActionsClick('Hi!')">Say Hi!</button>
        </div>
      </div>
    </template>
    
    

    App.vue -> script

    
    <script>
      export default {
        name: 'App',
        methods: {
          handleClick(s) {
            this.$store.commit('changeMessage', s);
          },
          handleActionsClick(s) {
            this.$store.dispatch('actionsChangeMessage', s);
          }
        }
      }
    </script>
    
    

    因为Action不是直接更改状态,而是提交mutation。所以我们就可以在Action内部执行异步操作。

    
    const actions = {
      actionsChangeMessage: (context, s = "") => {
        
        setTimeout(() => {
          context.commit('changeMessage',s)
        }, 1000)    
    
      }
    }
    
    
    • 1s后触发

    Modules

    Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter。

    就如我们上面的module目录下的test文件夹,就可以当做一个子模块。

    在vuex的入口文件配置如下即可:

    
    export default new Vuex.Store({
      modules: {
        test:test
        //, b: moduleB
      }
    });
    
    

    辅助函数

    vuex提供了辅助函数mapState、mapGetters、mapMutations、mapActions。将vuex.store中的属性映射到vue实例身上,这样就可以在vue实例中直接访问vuex.store中的属性。

    mapState,mapGetters:将属性映射到computer上
    mapMutations、mapActions:将属性映射到methods上

    对应的写法改为:

    App.vue:

    
    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <div>{{message}}</div>
        <div>{{reversed}}</div>
        <div>
          <button v-on:click="change('Hello!')">Say Hello!</button>
          <button v-on:click="actionsChange('Hi!')">Say Hi!</button>
        </div>
      </div>
    </template>
    
    <script>
      import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    
      export default {
        name: 'App',
        computed: {
          ...mapState({
            message: state => state.test.message
          }),
          ...mapGetters({
            reversed: 'reversedMessage'
          })
        },
        methods: {
          ...mapMutations({
            change: 'changeMessage'
          }),
        ...mapActions({
              actionsChange: 'actionsChangeMessage'
            })
        }
      }
    </script>
    
    

    四个辅助函数的写法均有以下两种形式
    ...mapActions(['method1', 'method2' ]),
    ...mapActions({m1: 'method1',m2: 'method2', })

  • 相关阅读:
    关于相对定位与绝对定位
    一些常用但不平凡的CSS属性
    Java-认识变量、注释并能及时发现错误
    了解Java并学会创建Java项目(一个菜鸟的成长历程)
    竞态条件
    web服务器原理
    信号
    静态网页与动态网页区别
    mmap
    HTTP协议
  • 原文地址:https://www.cnblogs.com/chenjy1225/p/14705300.html
Copyright © 2011-2022 走看看