Vuex的使用

Vuex是什么

vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，
通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

Vuex的五大核心

1. state： 存放状态，例如你要存放的数据
2. mutations：修改状态，并且是同步的，在组件中使用$store.commit(“事件名”,可以发送参数);来调用，这个和我们组件中的自定义事件类似。
3. actions：异步操作，在组件中使用$store.dispath(“事件名”,可以发送参数),来调用actions中定义的异步操作。
4. getters：对数据获取之前的再次编译，可以理解为state的计算属性，我们在组件中使用$store.getters.fun()
5. modules：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。调用 store.state.模块名.属性名

Vuex的基本使用

1. 首先下载vuex
2. 在根目录中创建一个store文件夹，并创建一个index.js文件
3. 在main.js中引入，并挂载到实例上
4. 最后那个组件需要，直接引入即可

创建实例

在index.js文件中创建vuex,
首先引入vue，之后引入我们的vuex,
使用vue.use(vuex)方法
直接导出 new vuex.Store() 实例构造器 

import Vue from 'vue'
// 引入 vue
import Vuex from 'vuex'
// 引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
	// 导出一个vuex实例
	state: {
		// 状态
		msg:"没改变"
	},
	mutations: {
		// 同于修改状态
		btn(state,data){
		// state 我们的状态对象，这里没有this，想要修改状态必须通过mutations。
		// data 调用这个方法的时候，可以传递过来参数。注意：只能传递一个参数。
		state.msg="改变了"
		}
	},
	actions: {
		// 异步触发mutations
	},
	getter: {
		// 类似于计算属性

	}
})

在main.js中引入

import Vue from 'vue'
import App from './App'
import store from './store/index.js';
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App,
	store
	// 挂载到vue实例上
})
app.$mount("#app")

组件中使用

this.$store.state.变量名
// 读取数据
this.$store.commit("方法名",数据);
// 触发我们mutations中的方法，可以传递参数，也可以不传递。
this.$store.dispath("事件名",参数);
// 触发我们的ctions中的异步方法，在通过mutations触发我们的同步方法修改state
this.$store.getters.fun()
// 调用我们getters中的属性

高级用法-数据持久化

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

npm i vuex-persist --save

在vuex文件中引入

import name from ‘vuex-persist’

使用

import Vuex from 'vuex'
import name from 'vuex-persist'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [
  //在vuex里跟state同级配置
    new name({
      storage: window.localStorage,
    }).plugin,
  ],
})

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

1. 有那几个辅助函数(4大金刚)
   mapState,mapActions,mapMutations,mapGetters
2. 助函数可以把vuex中的数据和方法映射到vue组件中，达到简化操作的目的
3. 如何使用：
   先引入、在用展开运算符展开

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex'; //引入
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    //mapState就等于下面这个
    // counts(){
    //   return this.$store.state.count
    // },
    ...mapGetters({
      getternum:'doneTodos'
    }),
    //mapGetters就等于下面的这个
    // getternum(){
    //   return this.$store.getters.doneTodos
    // }

  },
  methods:{
    ...mapMutations({
      addnum:'addNum'
    }),
    addnum1(){
      this.addnum()
    },
    //mapMutations就等于下面的这个
    // addnum1(){
    //   this.$store.commit('addNum')
    // },
    
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    actionnum6(){
      this.actionnum()
    },
    //mapActions就等于下面的这个
    //  actionnum6(){
    //   this.$store.dispatch('actionNumAdd')
    // }
    
  }
}
</script>

注意：
mapState和mapGetter的使用只能在computed计算属性中，
mapMutations和mapActions使用的时候只能在methods中调用，否则报错