简易的vuex用法-白红宇

vuex是vue中用于管理全局状态的一个组件，用于不同组件之间的通信，下面将介绍它的简单用法

首先安装vue与vuex

npm install vuenpm install vuex --save

然后创建一个单独的文件store.vue用来对vuex的处理和使用

import vue from 'vue'import vuex from 'vuex'vue.use(vuex)

vuex有以下几种选项

mutations: 在 store 上注册 mutation，处理函数总是接受 state 作为第一个参数（如果定义在模块中，则为模块的局部状态），payload 作为第二个参数（可选）。

getters: Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

我们今天只用到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: '
      '})

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

每一次的记录，都是向前迈进的一步