欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

对vuex的浅解

程序员文章站 2022-04-02 23:01:52
...

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>

  

 
 

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