VueX（简）

最近又看了vue的文档，借此整理一下知识。用于自我加深理解

vueX是vue官方推出的状态管理机制。

上面一张图是核心

主要为：

State：存储数据

Mutation: 更改数据

Action: 暴露出来的方法，用来调用Mutation

vueX的推出极大方便了项目的维护，特别是大型项目中，数据的管理。VueX不推荐直接改变其数据源

vueX我们可以抽象为一个仓库，用来管理全局的数据，以达到不同实例之间的共同联通。

为什么不直接建立一个js文件来放数据呢？比如：

const dataStore = {}


////////////////////////

const vm1 = new Vue({
    data: dataStore
})


const vm2 = new Vue({
    data: dataStore
})

看似也行，当改变dataStore中的值，实例中的值也相应发生改变。但是这样会有一个问题，官方的说法是：调试将会变为噩梦。任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。

这里实现一个简单的vueX实例。

在确保引入vueX，以及在VUE实例上使用这个插件后

// Vue.use(vueX) 

const Store = new Vuex.Store({
    state: {
        name: '张三'
    },
    mutations: {
        CHANGE_NAME(name) {
            state.name = name
        }
    }
})

// ***************** // 

store.commit('CHANGE_NAME(', '李四')

console.log(store.state.count)  // 李四

当然还是不直接去操作mutations是一个比较好的做法，因为其是为了更好的追踪状态的变化，也便于维护, 所以就有Action是个不错的方式

 这里还有两个概念就是modules和getters

modules：当vue的数据量逐渐增加，明显像上面直接使用state的话不太适合管理数据，此时我们可以用modules，将数据源分为一个又一个遍历管理的js文件

如：我有city.js和country.js来作为数据源

// city.js
const city = {
  state: {
    cityName: ''
  },
  // mutations? 讲mutations封装到模块中便于管理，mutataions本身就不应该被直接调用
  mutations: {
    'SET_CITY': (state, city) => {
      state.city = city
    }
  }
}

// 不要忘了引出
export default city

// country.js

const country = {
  state: {
    countryName: ''
  },
  mutations: {
    'SET_COUNTRY': (state, country) => {
      state.country= country
    }
  }
}

export default country 


// **************//

import city from './modules/book'
import country from './modules/store'

import Vue from 'vue'
import Vuex from 'vuex'

// 模块化，需要去vue实例中引入
export default new Vuex.Store({
  modules: {
    city ,
    country 
  }
}）

便于管理的vueX对项目的重构以及维护是很有帮助的，当然在模型（modules）加入actions,和getters也是可以的，主要看设计习惯。

 store.state.city // 访问city 2 store.state.country // 访问country 

getter：可以看做是store的计算属性，很明显state里存储的数据都是一个量而已，当数据需要再处理时，比如需要先筛选再返回给页面，特别是多个页面需要用到这个数据，这时候state就不够用了，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

// 接着上面的例子
export default new Vuex.Store({
  modules: {
    city ,
    country 
  },
   getters: {
     // state是参数
     realCityName: state => {
        // 这里举个例子，正常不会筛选这么无聊的东西
        return state.city.cityName.filter(todo => todo !== '')
    }
  }
})


// 可以通过属性访问
store.getters.realCityName

getters还可以接收第二个参数getters

getters: {
    // state是参数
    realCityName: state => {
         return state.city.cityName.filter(todo => todo !== '')
    },
    cityLength: (state, getters) => {
         return getter.realCityName.length
    }
}

是否对通过store.state.xxx来获取Vuex中的内容感到繁琐。

Vuex提供了mapGetters和mapActions辅助函数

mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

mapActions辅助函数同理，将store中actions映射到组件局部的Methods

import { mapGetters， mapActions } from 'vuex'

export default {
    computed: {
    // 使用扩展运算符将getters混入到computed中
        ...mapGetters([
            'fullCityName', 
            'cityNameLength'])
    },
    methods: {
        // 方法同理
        XXX为具体方法名
        ...mapActions(['XXXXX'])
    }
}