zoukankan      html  css  js  c++  java
  • Vue之Vuex

    一.什么是vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是一个数据统一管理工具

    二.如何使用vuex

       首先肯定是要下载vuex ,使用 npm install vuex --save-dev 下载 

       引入vuex,这里我建议如果数据量不大把vuex所有的属性单独写到一个js文件里面,方便管理

    import Vuex from 'vuex' //使用vuex

    Vue.use(Vuex);//调用vuex

    三.使用state创建数据,它用来创建一些初始数据,以方便各个组件之间来回调用

    var state = {
        num:0
    }

    四.有时候我们需要从 store 中的 state 中派生出一些状态,就使用getters

    const getters={
        num: state => {
          return state.num
        }
      }

    五.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

    const mutations = {
        addNum(state){
            state.num++
        }
    }

    六.Action 类似于 mutation,不同在于:1.Action 提交的是 mutation,而不是直接变更状态。2.Action 可以包含任意异步操作

    const actions = {
        addNum({commit}){
            commit('addNum')
        }
    }

    七.导出

    export default new Vuex.Store({
        state,
        mutations,
        actions,
        getters
    })

    七.在main.js中引入vuex

    import store from './vuex'  //这个vuex为你的写vuexjs文件
    
    new Vue({
      store,
      el: '#app',
      render: h => h(App)
    })

    八.在vue组件中使用vuex

    import {mapGetters,mapActions} from 'vuex'
    
    export default {
            data(){
                return {
                }
            },
            computed:{
                ...mapGetters([
                    'num'
                ]),
                
            },
            methods:{
                ...mapActions([
                    'addNum'
                ])
            }
            
        }

       

  • 相关阅读:
    JDBC
    Maven入门初级教程
    os.path路径拓展 python3
    requests实现文件下载, 期间显示文件信息&下载进度_python3
    yield浅析-Python3
    Scoop
    U盘启动盘制作工具(安装Linux)
    JavaScript摘要笔记
    Hexo+Github搭建博客&各种设置
    Linux下搭建svn服务端
  • 原文地址:https://www.cnblogs.com/zhizu/p/6898300.html
Copyright © 2011-2022 走看看