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中的数据进行加工处理形成新的数据
- getter 类似Vue的计算属性
- Store中数据发生变化,Getter的数据也会跟着变化
第一中方式
第二种方式