Vuex的了解

1.vuex的用途和概念

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。里面的数据可以被所有组件使用，也就是共享资源。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

2.vuex里面的都有什么方面

1.state：

   vuex的基本数据,用来储存变量的。

2.getters：

   vuex里面的计算属性，getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

3.mutation：

   提交更新数据的方法，必须同步。每个mutation都有一个字符串的事件类型和一个回调函数。回调函数就是我们实际进行状态更新的地方，并且它会接受state成为第一个参数，第二个是vue组件中穿过来的值

4.action

   和mutation的功能差不多，但是有不同之处：

   1.action提交的是mutation，而不是直接更改状态

   2.action可以包含异步操作

5.modules：

   模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,管理更为方便。

3.vuex中的映射方法

    映射方法用的属性又称为四大金刚：

    是mapState、mapMutations、mapActions、mapGetters

    这四个单词对应这vuex中State、Mutations、Actions、Getters，利用四大金刚可直接调用这几个板块中的内容

    四大金刚的使用方法就是:

import { mapState } from 'vuex'

computed: {
	// 第一种书写形式：想用哪一个数据，直接使用 ...mapState 映射出哪一个数据就好
	...mapState(['data2', 'data1', 'data'])
	// 第二种书写形式：以对象的形式映射进来，可以在自己的组件中起一个别名，template页面可直接使用 a 进行渲染
  	...mapState({
  		a: 'data2',
  		data1: 'data1'
  	})
}

// 第三种书写形式：直接把整个 mapState 给到了 computed。不能再用计算属性去做别的事情了
computed: mapState(['data1', 'data2', 'data']),

// 第四种书写形式：不能再用计算属性去做别的事情了
computed: mapState({
    data: 'data',
    data1: 'data1',
    a: 'data2'
})

 4.可持久化插件

    当我们的数据被储存到vuex中的时候，我们刷新页面有时候不想让数据被刷新，就会使用一个拆件，将vuex中的数据放到本地存储中，实现持久化

      一、安装插件：

              cnpm i vuex-persist --save

      二、引入：

               store下index.js引入import vuexPersist from “vuex-persist”

      三、配置插件

//在vuex中写

  plugins:[
        new vuexPersist({
            storage: window.localStorage 
          }).plugin,
]