vue中vuex的基础使用

Vuex 是什么？

前端的spa模块化项目中不可避免的是某些变量需要在全局范围内引用，此时父子组件的传值，子父组件间的传值，兄弟组件间的传值成了我们需要解决的问题。虽然vue中提供了props（父传子）commit（子传父）。但是这种方式在项目开发中带来的问题比他解决的问题（难管理，难维护，代码复杂，安全性低）更多。vuex的诞生也是为了解决这些问题，从而大大提高我们vue项目的开发效率。

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

复杂的vue项目中，多个组件之间的数据保存一般都存在vuex里面，比如系统管理页面的tabs、用户的信息、侧边栏的状态等等。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。平时开发中大多都还只是在使用阶段，最近做一些总结

但有时候开发一些小型的vue项目中并不是必须要引入vuex，项目较为简单情况还用vuex，那会增加项目的维护难度和开发成本

vue的基础使用

1. vuex配置
2. 页面中使用vuex
3. vuex的持续化储存
4. vuex的监听，当vuex修改时候触发页面中的事件

vuex的原理

Vuex采用MVC模式中的Model层，规定所有的数据必须通过action—>mutaion—>state这个流程进行来改变状态的。再结合Vue的数据视图双向绑定实现页面的更新。统一页面状态管理，可以让复杂的组件交互变的简单清晰，同时在调试时也可以通过DEVtools去查看状态。

vuex的配置

下载vuex

cnpm i vuex --save

main.js里面引入vuex

import store from './store'
new Vue({
    el: '#app',
    router,
    store,  //这里配置后所有的组件对象多了个属性: $store
    template: '<App/>'
})

配置vuex src目录中创建文件夹store/index.js store/mutations.js
index.js配置

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
Vue.use(Vuex)
let state = {
    data:1
}
export default new Vuex.Store({
    state,
    mutations: mutations, //修改vuex的方法
    getters:{           //getters //获取数据时候的过滤器  
    },
      // action行为  //通常用于异步修改数据
    actions: {
    },
    // module   //将vuex分割成多个模块
    modules: {
    },
    strict: process.env.NODE_ENV !== 'production',    //开发环境用严格模式，生产环境不用
})

mutations.js配置(主要用于修改vuex的状态暴露出来的方法)

export default {
    // 修改数据
    ['ALTER'](state, data) {
        for (let i in data) {
            state[i] = data[i]
        }
    },
    ['ADD'](state) {
        state.data+=1;
    },
}

在页面中使用vuex的数据

//先引入vuex的方法
import {mapMutations} from "vuex";

//在vue中methods里面添加方法 并且使用vuex里面的方法
methods:{
	fun(){
		this.ADD()
	},
	...mapMutations(["ALTER", "ADD"])
}

在页面中渲染vuex的数据

<div>$store.state.data</div>

vuex的持续化储存

当游览器刷新的时候，vuex储存的数据都会被销毁掉，有时候开发中需要保存vuex中的数据，这时候就需要持续化储存数据，用到插件 vuex-persistedstate
下载vuex

cnpm i vuex-persistedstate --save

配置vuex文件

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state,
    mutations: mutations, //修改vuex的方法
    getters:{           //getters //获取数据时候的过滤器  
    },
      // action行为  //通常用于异步修改数据
    actions: {
    },
    // module   //将vuex分割成多个模块
    modules: {
    },
    plugins: [createPersistedState({
        reducer(val) {
            // 可缓存指定数据 也可以缓存所有数据
            return {
                data:data.contentTabs
            }
       }
    })],
    strict: process.env.NODE_ENV !== 'production',    //开发环境用严格模式，生产环境不用
})

	//这是缓存所有数据
 plugins: [createPersistedState()]

一般使用的是localStorage来缓存数据，如果需要使用sessionStorage的情况

	plugins: [
    	createPersistedState({ storage: window.sessionStorage })
	]

vuex的监听，当vuex修改时候触发页面中的事件

有时候需要A组件修改一个值 B页面需要根据vuex的值来触发其中的方法

	//在vue页面的computed中增加   （vue的计算属性）
	computed:{
		getdata() {
            return this.$store.state.data;
        }
	},
	//然后在vue的监听事件中监听
	watch:{
		getdata: {
            handler:function(newd, old) {
                //当vuex的data值修改的时候 可触发
            },
            immediate: true				//立马监听
        }
	}

以上就是vuex的基础方法使用