简易的vuex用法

框架

浏览数:332

2019-9-17

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,getters

const state = {
    token: '' // 定义state的初始值,组建中我们可以用$store.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方法。actions里面可以执行异步操作。

getters: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  }

getters类似于vue的计算属性,它的作用是用来派生一些新的状态,比如我们要把state状态的数据进行一次映射后者筛选,并把这个状态返回给组件使用。

最后将生成的实例导进main.js

export default new Vuex.Store({
  state,
  mutations,
  actions,
getters })

main.js

import store from './store'
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

这样vuex的功能已经可以用了,如果业务需要,可以慢慢将它们的选项都完善进去

作者:前端杂货