zoukankan      html  css  js  c++  java
  • Vuex使用

    目录结构:

    index.js // 在很多处被命名为store.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import * as actions from './actions'
    import * as getters from './getters' // 就是获取state中状态,仅单向的获取数据,不做任何修改
    import state from './state'  // 相当于数据库,定义了应用数据的数据结构及初始状态
    import mutations from './mutations' // 定义state数据的修改操作
    import createLogger from 'vuex/dist/logger' // 修改记录日志
    
    Vue.use(Vuex)
    
    const debug = process.env.NODE_ENV !== 'production' // 在开发环境下使用debug
    
    export default new Vuex.Store({
      actions,
      getters,
      state,
      mutations,
      strict: debug,
      plugins: debug ? [createLogger()] : []
    })
    

      

    效果一:叠加

    1-1、普通方法实现

    State.js // 定义常量

    const state = {
      starNum: 1 // 初识值
    }
    
    export default state
    

    Mutations.js // 定义方法

    const mutations = {
      // 方法1:
       add: state => state.starNum++
    
      // 方法二:
       add (state) {
         state.starNum++
       }
    }
    export default mutations

    界面

    方法一:在html中直接使用vuex中的方法
    <template>
      <div>
      {{$store.state.starNum}} // 显示当前starNum
      <button @click="$store.commit('add')">+</button> // 运用add方法
      </div>
    </template>
    
    <script type="text/ecmascript-6">
     import store from 'store/index'
     export default {
       store
     }
    </script>
    
    方法二:利用方法
    <template>
      <div>
       {{$store.state.starNum}} // 显示当前starNum
       <button @click="add()">+</button> // 运用add方法
      </div>
    </template>
    
    <script>
      import store from 'store/index'
      
      export default {
       methods: {
         add () {
    // 写法一: store.commit('add')
    // 写法二: return this.$store.commit('add')     
         }
       },
       store
     }
    </script>
    

      

    1-2、利用mutations-types实现

    State.js // 定义常量

    const state = {
      starNum: 1 // 初识值
    }
    
    export default state

    mutations-types.js // 定义方法名

    export const ADD = 'ADD' // 叠加方法
    

    Mutations.js // 定义方法

    import * as types from './mutation-types'// 获取mutation-types内定义的常量
    
    const mutations = {
      [types.ADD]: state => state.starNum++
     
    }
    export default mutations

    页面

    <template>
      <div>
          {{$store.state.starNum}}
          <button @click="addNum()">+</button>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
      import {mapMutations} from 'vuex'
    
      export default {
        methods: {
          ...mapMutations({
            addNum: 'ADD'
          })
        }
      }
    </script>
    

      

     效果二、带参数的叠加

    1-1、普通方法实现

    State.js // 定义常量

    const state = {
      starNum: 1 // 初识值
    }
    
    export default state

    mutations.js // 定义方法名

    const mutations = {
      add (state, n) {
        state.starNum += n
      }
    }
    

    界面

    方法一:$store.commit
    <template>
      <div>
       {{$store.state.starNum}} // 显示当前starNum
       <button @click="add()">+</button> // 运用add方法
      </div>
    </template>
    
    <script>
      import store from 'store/index'
      
      export default {
       methods: {
         add () {
    // 写法一: store.commit('add', 4)
    // 写法二: return this.$store.commit('add', 10)     
         }
       },
       store
     }
    </script>
    
    方法二:mapMutations
    <template>
      <div>
        {{$store.state.starNum}}
        <button @click="addNum()">+</button>
      </div>
    </template>
    
    <script>
      import {mapMutations} from 'vuex'
    
      export default {
        methods: {
          ...mapMutations({
           addNum: 'add'
          })
        }
      }
    </script>
    

      

    1-2、利用mutations-types实现

    State.js // 定义常量

    const state = {
      starNum: 1 // 初识值
    }
    
    export default state
    

    mutations-types.js // 定义方法名

    export const ADD = 'ADD' // 叠加方法

    mutations.js // 定义方法名  

    import * as types from './mutation-types'
    
    const mutations = {
     [types.ADD] (state, n) {
        state.starNum += n
      }
    }
    
    export default mutations  
    界面

    <template>
      <div>
       {{$store.state.starNum}} // 显示当前starNum
       <button @click="addNum(4)">+</button>
      </div>
    </template>
    
    <script>
      import store from 'store/index'
      import {mapMutations} from 'vuex'
      
      export default {
       methods: {
         addNum() {
            this.$store.commit('add', n)
         },
         ...mapMutations({
             addNum: 'ADD'
          })
       },
       store
     }
    </script>
    

      











  • 相关阅读:
    选课系统
    Python入门day34——网络编程基础
    Python入门day34——异常处理
    Python入门day33——元类、属性查找
    Python入门day33——反射、内置方法
    Python入门day30——mixins机制、super()、多态、绑定方法、内置函数
    从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
    前端中常见数据结构小结
    从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
    从 0 到 1 实现 React 系列 —— 3.生命周期和 diff 算法
  • 原文地址:https://www.cnblogs.com/yan0802/p/8678268.html
Copyright © 2011-2022 走看看