Vuex相关用法

vuex的相关用法

1. 安装依赖包

npm install vuex -- save

2. 导入依赖包,并创建对象 在src目录下新建一个文件夹 store 在里面新建index.js文件 (index.js)

import Vue from 'vue'
import Vuex from 'vuex'
import commonStore from './commonStore'

Vue.use(Vuex)

const store = new Vuex.Store({
  ...commonStore
})
export default store

3. 挂载到vue实例中( main.js)

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store, // 在这里挂载
  components: { App },
  template: '<App/>'
})

4. commonStore.js 文件

const state = {}

const mutations = {}

const actions = {}

const getters = {}

export default {
	state,
	getters,
	actions,
	mutations
}

5. Vuex 的核心概念

5.1 State 提供公共数据,所有的数据都要放在state中进行存储

const state = {
	// 创建数据源,提供唯一的公共数据
	cont:0
}

组件中访问State 第一种方式

在script中    this.$store.state.cont  

在template中  $store.state.cont

组件中访问State 第二种方式

// 在需要访问的页面中导入
import {mapState} from "vuex"

在导入的mapState函数中,将当前组件需要的全局数据,映射为当前组件的computed 属性

mapState函数映射为当前组件computed 计算属性

 computed:{
        ...mapState([
            'cont'
        ])
    },
    
取值方式

在script中    this.cont  

在template中    cont

5.2 mutations用于变更Store中的数据

vuex 中只能通过mutations 改变Store 中的数据(同步) 不能写异步的代码(例如 setTimeout)

可以集中监控所有数据的变化

以下通过简单的案例来实现用法
点击按钮实现页面数字加一
方式一 this.$store.commit 触发mutations

方式二 触发mutations mapMutations

5.3 actions用于处理异步数据

如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式变更数据
刚上面的那个例子实现延时1S 加一

方法一: this.$store.dispatch(“addAsync”);

 methods: {
        clickAdd() {
            this.$store.dispatch("addAsync");
        }
    }

方法二 mapActions

5.4 getters用于对Store中的数据进行加工处理形成新的数据

1. getter 类似Vue的计算属性
2. Store中数据发生变化,Getter的数据也会跟着变化
   第一中方式
   
   第二种方式