vuex的概念详细理解

Vuex是专门为vue.js应用程序开发的状态管理模式，它其实就相当于一个公共仓库，保存着所有的组件都能公用的数据
它的状态存储是响应式的，如果我们的组件使用了vuex，一旦里面的里面的state发生改变，它所关联的所有组件都会发生改变，这样为我们开发项目项目提供极大的便利，

vuex还不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方 便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常简洁。

vuex有五个核心概念
state： 存储数据的地方
actions：异步操作 借此触发mutations的方法，保存数据
mutations: 同步操作，只有mutations可以修改state中的数据
getters： 相当于 state的计算属性。
moduleas模块化modeA, modeB，modeC，store的子模块，为了开发大型项目，方便状态管理而使用的，

vuex的安装

 npm install vuex --save

在mian,js中引入引入vuex

然后创建仓库

    import Vue from 'vue'
    import Vuex from 'vuex'

    //vuex 注册给vue
    Vue.use(Vuex);

    //数据中心
    let state={
        count:10
    }
    //actions 异步操作（定时器，ajax）
    let actions={
       getsync(context,val){
           //context 值得是上下文对象。
         context.commit('increament',val)
       }
    }
    //mutations 同步修改state中的数据
    let mutations={
        increament(state,val){
            //state指的是 state数据中心
           state.count+=val;
        }
    }
    // getters  可以对state中的数据进行计算。（相当于组件中的computed）
    let getters = {
        newVal: (state)=> state.count*2
    }

    //实例化 仓库
    export default new Vuex.Store({
        state,
        actions,
        mutations,
        getters
    });


    //main.js
    import store from './store/index'

    //注入根组件
    new Vue({
        store,
        router,
        components:{xxxx}
    })


    A.vue

     {{this.$store.state.count}}
     {{this.$store.getters.newVal}}
    

     methods:{
         increament(){
             //两种手法
             //1. 通过dispatch()触发actions中的方法修改数据
             this.$store.dispatch('getSync',1)
             //2. 如果同步修改，通过commit()触发mutations中的方法修改。
             this.$store.commit('increament',1)
         }
     }

state

可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更
 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，
 它包含着你的应用中大部分的状态 (state)。

备注

1. 只有commit()才可以触发mutations中的方法 （可以在组件中调用，也可以在actions中调用）
2. 只有dispatch()才可以触发actions中的方法 （只能在组件中调用）
3. vuex 是单向数据流
4. 只有mutations才可以修改state中数据。

详述Vuex运行机制

Vuex的状态存储是响应式的
当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态
不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

Vuex中如何异步修改数据

同步更改mutations
异部更改action,action中通过commit触发mutations进行state数据更改
页面中触发action中函数

vuex高级篇1之语法糖辅助函数

语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters
当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数。

高级篇2、 modules 模块化管理数据

状态树结构复杂的时候，可以用modules进行管理。
多人协同开发，可以用modules，避免命名空间冲突。

vuex 超级篇 数据持久化

什么是数据持久化?

其实vuex本质上只是一个公共变量，是存储在浏览器内存中的，刷新页面，浏览器内存重置，数据也会被清空。。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化。如果要做数据持久化存储，肯定需要借助浏览器缓存，常用的也就localStorage,sessionStorage,