VUEX相关

VUEX是什么？

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理所有组件的状态。

五大核心

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

基本使用
首先我们需要下载vuex
我们的根目录下创建一个store文件夹，在这个里面创建一个state.js文件。
在这个js文件中创建我们的vuex。
首先引入vue，之后引入我们的vuex。
使用vue.use(vuex)方法
直接导出 new vuex.Store() 实例构造器
我们在这个方法中定义状态和方法。
之后在我们根目录下的min.js中引入，并挂载到原型上即可。
创建实例

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中的属性

我们vue在模板中使用vuex时，可以省略this，只能使用state和getters

---

！！！
我们在小程序中是无法在模板中直接使用state和getters的。
我们可以使用补助函数，或者是模板中的计算属性，把状态return出去。**

vuex补助函数(语法糖)

首先我们需要先引入
然后使用展开运算符将其展开
相当于把state展开到我们组件中了
注意
mapState和mapGetter的使用只能在computed计算属性中，
mapMutations和mapActions使用的时候只能在methods中调用否则报错
首先是引入

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
// 我们使用哪个引入哪个也可以

</script>

之后我们使用展开运算符

<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>

数据持久化

数据持久化是将我们vuex种state种的数据都保存在本地存储种，一旦state种的数据发生改变，就更新本地存储种的数据。我们在刷新页面后会帮我们自动获取数据，不用我们手动获取。
1、安装
npm i vuex-persist --save
2、在vuex文件种引入
import name from ‘vuex-persist’
3、使用

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,
  ],
})