• 对vuex的浅解


    vuex是什么?

    官网的解释是

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools,extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

    而就我浅显的理解是

    它类似一个html里面的全局变量,可运用于全局,而vue存储的东西,可以运用于vue所有的组件,方便与组件里面数据的接受与监听。

    vuex 在项目中的使用【通过vue-cli 脚手架搭建的项目中】

    安装

     
     
    1
    npm install vuex --save
     
     

    在main.js中 引入

     
    //main.js
    
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    //创建一个store以便于在所有组件都能查询到vuex的数据
    
    const store = new Vuex.Store({
    
        state: {
    
            count: 0
    
        },
    
        mutations: {
    
            increment (state) {
    
                state.count++
    
            }
    
        }
    
    });
    
    ​
    
    //简单测试
    
    //store.commit('increment')
    
    //console.log(store.state.count);
    
    ​
    
    //在vue实例中引用
    export default new Vue({
    
        el: '#app',
    
        store,
    
        components: { App },
    
        template: '<App/>'
    
    });
    

      

    vuex核心概念的使用

     
    
    //main.js
    
    const store = new Vuex.Store({
    
        //数据存储的字段
    
        state: {
    
            count: 0
    
        },
    
        //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    
        mutations: {
    
            increment (state,value) {
    
                state.count+=value
    
            }
    
        },
    
        //可以理解为一个动作,它提交的是 mutation,而不是直接变更状态。
    
        actions: {
    
            increment (context,value) {
    
                context.commit('increment',value)
    
            }
    
        },
    
        //将数据返回出去,以便于组件中拿到count值
    
        getters:{
    
            getCounts:state =>state.count
    
        }
    
    });
    

      

     
    //新建一个组件,假设命名为testDemo.vue
    
    <template>
    
        <div>
    
            {{counts}}
    
        </div>
    
    </template>
    
    ​
    
     <script>
    
     export default {
    
         name: 'testDemo',
    
         data () {
    
             return {
    
             }
    
         },
    
         computed:{
    
             //通过计算属性监听vuex里面 count的值
    
             counts(){
    
                 return this.$store.getters.getCounts;
    
             }
    
         },
    
         created(){
    
             setTimeout(()=>{
    
                 //action 方法提交
    
                 this.$store.dispatch('increment',10)
    
             },2000)
    
         }
    
     }
    
     </script>
    

      

     

    随后,可以将store在main.js中处理出来,src目录下新建一个文件夹命名为store,新建index.js,actions.js,getters.js,mutation-types.js,mutations.js

     
    
    //index.js
    
    import Vue from 'vue';
    
    import Vuex from 'vuex';
    
    import mutations from './mutations';
    
    import actions from './actions';
    
    import getters from './getters';
    
    Vue.use(Vuex);
    
    export const store = new Vuex.Store({
    
        state: {
    
            count: 1,
    
        },
    
        mutations,
    
        actions,
    
        getters
    
    });
    
    // mutation-types.js
    
    export const INCREMENT="INCREMENT";
    19
    ​
    
    // action.js
    
    import {
    
      INCREMENT
    
    } from './mutation-types';
    
    export default {
    
      [INCREMENT]({ commit, state },value) {
    
        commit(INCREMENT,value);
    
      },
    
    };
    
    ​
    
    // mutations.js
    
    import {
    

      

     

    testDemo.vue

     
    <template>
    
            <div>
    
                {{counts}}
    
            </div>
    
        </template>
    
    ​
    
        <script>
    
        export default {
    
            name: 'testDemo',
    
            data () {
    
                return {
    
                }
    
            },
    
            computed:{
    
                //通过计算属性监听vuex里面 count的值
    
                counts(){
    
                    return this.$store.getters['INCREMENT'];
    
                }
    
            },
    
            created(){
    
                setTimeout(()=>{
    
                    //action 方法提交
    
                    this.$store.dispatch('INCREMENT',10)
    
                },2000)
    
            }
    
        }
    
        </script>
    

      

     
     

    这样以来,逼格就立马高了一些
    最后,文件的目录大概就长下图这个样子

  • 相关阅读:
    TV
    [转载]如果看了这篇文章你还不懂傅里叶变换,那就过来掐死我吧
    search result
    floating-camera
    HDU 1032.The 3n + 1 problem【注意细节】【预计数据不强】【8月21】
    C语言socket send()数据缓存问题
    Marlin固件之—:基础入门与測试
    java语句顺序有时非常重要
    Android Studio 使用正式签名进行调试
    插入排序、交换排序、选择排序、归并排序、基数排序
  • 原文地址:https://www.cnblogs.com/zhoubingyan/p/8780125.html
Copyright © 2020-2023  润新知