vuex简单的案例

Posted 2020-12-19 wuxiaoshi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于vuex简单的案例的主要内容，如果未能解决你的问题，请参考以下文章

Vuex 教程案例：计数器以及列表展示

vuex vuex模块化案例

VSCode自定义代码片段13——Vue的状态大管家

Vuex 核心概念基本使用及求和案例