看完Vuex这一篇直接实战

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

概念

vuex是什么？
它是状态管理，用来管理共享数据的。如果修改数据必须通过官方提供的方法去修改（mutation）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

官网地址

https://vuex.vuejs.org/zh/

场景

简单的项目根本用不到 Vuex 

如果你做的是大型复杂的项目，你自然想用vuex，真香！！！

安装vuex

npm install(i) vuex
版本号：+ vuex@3.6.2

基本仓库的搭建

src =>store =>index.js

• index.js

//引入核心库
import Vue from 'vue'
//引入vuex库
import Vuex from 'vuex'
//通过use调用一下
Vue.use(Vuex)

//Vuex 是一个对象，有很多属性和方法，比如有Store仓库 有辅助性函数
//实例化 Vuex的仓库 得到仓库上面的属性和方法
// console.log(new Vuex.Store(),'Vuex');
//导出仓库
export default new Vuex.Store({
    //数据状态，state （唯一的数据管理）
    state:{
        name:'巧克力',
        msg:'仰天大笑出门去，我辈岂是蓬蒿人'
    }
})

• main.js

//引入封装好的共享仓库
import store from './store'

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

• 组件中的调用

this.$store.state.XXX

核心概念

• state – 存放状态
• getters – state的计算属性
• mutations – 更改状态的逻辑，同步操作
• actions – 提交mutation，异步操作
• mudules – 将store模块化

state

vuex里有这么一个规则：
只能在mutaions里修改state，actions不能直接修改state

概念
state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。
注意点

1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

示例

new Vuex.Store({
	state:{
	//要定义的数据
	}
})

getters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state。

示例

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: 'reading', done: true},
      {id: 2, text: 'playBastketball', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

mutation

可以向commit传入额外的参数，即mutation的载荷。
注意

修改state的唯一方式
它可以执行同步方式
通过commit提交一个mutation

示例

组件中
methods:{
    方法名(){
        this.$store.commit('TYPE_NAME',参数)
    }
}

new Vuex.Store({
	mutations:{
        TYPE_NAME(state,payload){
            state.XXX = payload
        }
	}
})

Actions

概念
因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。
注意

actions可以执行异步操作
actions不能直接修改state

应用

组件中
methods:{
    方法名(){
        this.$store.dispatch('actionName',参数)
    }
}

new Vuex.Store({
	actions:{
        //actionName(context){
           //context.commit('TYPE_NAME',参数)
        //}
        //可以简写成
        actionName({commit}){
           commit('TYPE_NAME',参数)
        }
	}
})

mudules

1. module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理。
2. 每个module拥有自己的state, getters, mutation, action

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
 
store.state.a // 获取moduleA的状态
store.state.b // 获取moduleB的状态

辅助性函数

mapState

它是vuex的唯一数据源 

mapState（很少用！！！）

import {mapState} from 'vuex'

computed:{
	...mapState(['仓库中state值'])
	...mapState({
		想要渲染的名字:state=>state.值
	})
}

mapGetters

相当于计算属性。它作为，state和视图的中间层存在。它具有缓存效果

mapGetter

import {mapGetters} from 'vuex'

computed:{
	...mapState(['仓库中getters值1','仓库中getters值2',...])
	...mapState({
		想要渲染的名字:geter=>getter.值
	})
}

mapMutations

它是修改state的唯一方式，同步的
mapMutations

import {mapMutations} from 'vuex'

methods:{
	...mapMutations(['mutations名字一致']),
	...mapMutations({
		'自定义函数名称':'mutations名字'
	})
}

mapActions

它不能直接修改state,它只能commit一个mutations
它可以操作异步方法
mapActions

import {mapActions} from 'vuex'

methods:{
	...mapActions(['actions名字一致']),
	...mapActions({
		'自定义函数名称':'actions名字'
	})
}

Vuex和本地存储之间的区别

相同点：数据都可以给各个组件共享
不同点： 
vuex 刷新，数据回到初始状态。所有的数据不能数据持久化（不能永久性存储），当数据依赖发生变化，视图立马响应。
localStorage 可以数据持久化，但是当内容发生变化，重新存储。不能立马响应必须重新刷新页面才可以响应

当我们要刷新数据还能立马响应并持久化。就得两者结合使用！！！

应该遵循的规则

• 应用层级的状态都应该集中在store中
• 提交 mutation 是更改状态state的唯一方式，并且这个过程是同步的。
• 异步的操作应该都放在action里面