简易的vuex用法
Posted 前端杂货
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简易的vuex用法相关的知识,希望对你有一定的参考价值。
vuex是vue中用于管理全局状态的一个组件,用于不同组件之间的通信,下面将介绍它的简单用法
首先安装vue与vuex
npm install vue
npm install vuex --save
然后创建一个单独的文件store.vue用来对vuex的处理和使用
import vue from ‘vue‘
import vuex from ‘vuex‘
vue.use(vuex)
vuex有以下几种选项
- state: Vuex store 实例的根 state 对象
- mutations: 在 store 上注册 mutation,处理函数总是接受
state
作为第一个参数(如果定义在模块中,则为模块的局部状态),payload
作为第二个参数(可选)。 - actions: 在 store 上注册 action。处理函数总是接受
context
作为第一个参数,payload
作为第二个参数(可选)。 - getters: Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
- modules: 包含了子模块的对象,会被合并到 store。
- plugins: 一个数组,包含应用在 store 上的插件方法。
- strict: 使 Vuex store 进入严格模式,在严格模式下,任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。
我们今天只用到state,mutations,actions
const state = {
token: ‘‘
}
const mutations = {
setToken (state, token) {
state.token = token || ‘‘
}
}
我们可以用$store.commit(‘setToken‘, ‘xxxxxx‘)来改变state中token的值
const actions = {
setToken (context) {//这里的context和我们使用的$store拥有相同的对象和方法
context.commit(‘setToken‘);
//你还可以在这里触发其他的mutations方法
},
}
可以使用 $store.dispatch(‘setToken‘)
来触发 action
中的 setToken方法。
最后将生成的实例导进main.js
export default new Vuex.Store({
state,
mutations,
actions
})
main.js
import store from ‘./store‘ new Vue({ el: ‘#app‘, store, components: { App }, template: ‘<App/>‘ })
这样vuex的功能已经可以用了,如果业务需要,可以慢慢将它们的选项都完善进去
以上是关于简易的vuex用法的主要内容,如果未能解决你的问题,请参考以下文章