对Vuex的理解

---

一、什么是Vuex

通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护
分别是：state,actions,mutations,getters,modules

二、组成Vuex的5个部分

state: 用于存储公共的数据
mutations: 唯一可以改变state的地方
getters: 相当于vuex的计算属性
actions: 异步操作，在组件中使用是$store.dispath('')
modules: store的子模块，用于开发大型项目管理而使用的

state:使用方法：获取state里边数据 $store.state.list (list是你定义那个数组名字)
actions:使用方法： 在里边写完请求，在组件中通过 this.store.dispatch(‘参数一调用你写的请求名’,‘传的参数’)
mutations:使用方法：修改state里边的数据，只能用它来修改
getters:使用方法：它是一个计算属性，获取方法 $store.getters.(计算里边那个函数名)

三、Vuex基本使用

我通过是在根目录下新建一个store文件夹，里面创建一个index.js文件，最后在main.js中引入，并挂载到实例上，之后那个组件中需要用到vuex就调用就行

四、Vuex的安装

4.1 安装Vuex

npm install vuex --save

4.2 引用vuex,创建仓库store, 创建 store.js

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

//数据
const state={
    count:10
}
//action  执行异步操作，不可以修改state数据
const actions={
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',Object)
        },3000)
    }
}
//mutation 可直接修改state数据
const mutations={
    increment(state,value){
        state.count += value;
    },
    decrement(state,value){
        state.count -=value;
    }
}
//getter 
const getters = {
    newCount:state => state.count * 3
}
 
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

4.3 在 main.js中注册到根组件中

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

五、安装持久化插件

5.1 安装

npm install vuex-persistedstate

5.2 在store.js里

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

六、高级用法-数据持久化

vuex里面存放的数据，页面一经刷新会丢失：
解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在vuex中可以通过安装vuex-persistedstate 插件，进行持久化的配置就行

七、高级用法-辅助函数（语法糖）

1. 有那几个辅助函数(4大金刚)
   mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3. 如何使用：
   Import { mapActions, mapGetters, mapMutations, mapState } from ‘vuex’

八、Vuex的获取使用的方法

最简版

1. 组件里通过 $store.state 获取全局状态数据进行渲染
2. 通过 $store.commit 方法触发mutation 修改全局状态值 整个页面都会变

模块化

1. 模块化之后state的取值需要添加一级模块名 其他的三个核心不变
2. 可以在模块里添加命名空间 作用就是在 mutation getters actions的名字前面 添加模块名用处就是防止名字冲突

稍微复杂版

1. 组件里通过 $store.state 获取全局状态数据进行渲染
2. 通过 $store.dispath方法 触发action里的方法
3. action 触发mutation进行修改全局状态值

值类型向计算属性映射

1. mapState 将全局状态管理的state值映射到使用组价的计算属性
2. mapGetters 将全局状态管理的getters值映射到使用组价的计算属性

函数类型向methods进行映射

1. mapMutations 将mutation的值映射到 方法里
2. mapActions 将actions里的值映射到方法