码迷,mamicode.com
首页 > 其他好文 > 详细

vuex简单的案例

时间:2020-08-05 23:27:23      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:vue   template   com   pmu   count   click   作用   use   cli   

vuex

  • 作用:实现全局数据共享

  • 使用:

    • 安装 Vuex

      npm install vuex --save
      
    • 注册到vue项目

      import Vue from ‘vue‘
      import App from ‘./App‘
      import router from ‘./router‘
      import store from ‘./store/index.js‘
      Vue.config.productionTip = false
      
      /* eslint-disable no-new */
      new Vue({
        el: ‘#app‘,
        router,
        store,
        components: { App },
        template: ‘<App/>‘
      })
      
    • 定义Vuex文件 store/index.js

      import Vue from ‘vue‘
      import Vuex from ‘vuex‘
      
      Vue.use(Vuex)
      
      const store = new Vuex.Store({
        state: {
          count: 0
        }
      })
      
    • 组件中访问 count

      this.$store.state.count
      
    • 组件中更改 count 需要在 store/index.js 中添加 mutations

      const store = new Vuex.Store({
          state:{
              count:0
          },
          mutations:{
              add(state){
                  state.count ++
              }
          }
      })
      
    • 组件中更改数据

        methods:{
      	// 第一种方法 三个点的意思是扩展运算符 提取并打开
          ...mapMutations([‘add‘])
      	// 第二种方法
      	this.$store.commit(‘add‘)
        }
      
    • 如果需要异步改写数据 则需要借助 actions

      const store = new Vuex.Store({
          state:{
              count:0
          },
          mutations:{
              add(state){
                  state.count ++
              }
          },
          actions:{
              addasync(complex){
                  setTimeout(()=>{
                      complex.commit(‘add‘)
                  },1000)
              }
          }
      
      })
      
    • 组件中需要异步改变数据

        methods:{
      	// 第一种方法 三个点的意思是扩展运算符 提取并打开
          ...mapActions([‘addasync‘])
      	// 第二种方法
      	this.$store.dispatch(‘add‘)
        }
      
    • mapActions 和 mapMutations 是 vuex 提供的两个辅助函数

      import { mapMutations,mapActions } from ‘vuex‘
      
    • 完整的示例

      // main.js
      import Vue from ‘vue‘
      import App from ‘./App‘
      import router from ‘./router‘
      import store from ‘./store/index.js‘
      Vue.config.productionTip = false
      
      /* eslint-disable no-new */
      new Vue({
        el: ‘#app‘,
        router,
        store,
        components: { App },
        template: ‘<App/>‘
      })
      
      // store/index.js
      import Vue from ‘vue‘
      import Vuex from ‘vuex‘
      
      
      Vue.use(Vuex)
      
      const store = new Vuex.Store({
          state:{
              count:0
          },
          mutations:{
              add(state){
                  state.count ++
              }
          },
          actions:{
              addasync(complex){
                  setTimeout(()=>{
                      complex.commit(‘add‘)
                  },1000)
              }
          }
      })
      export default store
      
      // demo.vue
      <template>
          <div>
             <span>{{count}}</span>
             <button @click="add">+</button>
             <button @click="addasync">+async</button>
          </div>
      </template>
      
      <script>
      import { mapMutations,mapActions } from ‘vuex‘
      export default {
        data () {
          return {
            
          }
        },
        computed: {
          count: function () {
            return this.$store.state.count;
          }
        },
        methods:{
          ...mapMutations([‘add‘]),
          ...mapActions([‘addasync‘])
        }
      }
      </script>
      

vuex简单的案例

标签:vue   template   com   pmu   count   click   作用   use   cli   

原文地址:https://www.cnblogs.com/wuxiaoshi/p/13443097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!