vuex简单的案例

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>