vuex

Vuex是什么

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

vuex工作流程

1.vue组件->Dispatch派发->action
2.action->commit提交->mutation
3.mutation->change修改->state
4.state->render渲染->vue组件

组件文件：
state
action
mutation

什么情况下使用vuex

用于中大型单页面应用（登录、购物车、tab选项卡）
vuex中的状态类似于全局变量，刷新就会变成初始值；如果想保存这个值，就要结合sessionStorage和localStorage

问:sessionStrage 与vuex的区别
1.最重要的区别: vuex存储在内存，sessionStorage则以文件的方式存储在本地
2.应用场景:vuex用于组件之间的传值，sessionStorage则主要用于不同页面之间的传值。
3.永久性:当刷新页面时vuex存储的值会丢失，sessionStorage不会。

注:很多同学觉得用sessionStorage可以代替vuex,对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组》时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，sessionStorage无法做到，原因就是区别

计数器案列

文件结构：

效果截图（总数默认值为6）：

1.在components下建立myCount.vue：

<template>
    <div>
        <button @click="add">+</button>{{count}}<button @click="sub">-</button>
    </div>
</template>

<script>
    import {mapActions} from "vuex";
    import {INCREMENT,DECREMENT} from '../store/ActionType';
    export default {
        name: "myCount",
        data(){
            return{
                count:0
            }
        },
        methods:{
            ...mapActions([INCREMENT,DECREMENT]),
            add(){
                this.count++;
                this.increment();
            },
            sub(){
                this.count--;
                this.decrement();
            }
        }

    }
</script>

<style scoped>

</style>

2.views/About.vue：

<template>
  <div class="about">
    {{count}}
<!--    组件-->
    <myCount/>
    <myCount/>
    <myCount/>
  </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
import myCount from "../components/myCount";
export default{
  name:'About',
  data(){
    return{
      totalCount:0
    }
  },
  components:{
    myCount
  },
  //把count方法放进mapGetters中,mapGetters为计算属性
  computed: mapGetters(['count'])
  //有多个时，前面要加上三个点
  // computed: {
  //   ...mapGetters(['count'])
  // }
}
</script>

3.在store下建立文件

actions.js：

export default {
    //提交给mutation
    increment({commit}){
        commit('add')
    },
    decrement({commit}){
        commit('sub')
    }
}

getters.js：

export default {
    //下方的函数名与state中的名字相同
    count(state){
        return state.count;
    }
}

state.js：

export default {
    count:6,
    isLogin:false
}

mutations.js：

export default {
    add(state){
        state.count++;
    },
    sub(state){
        state.count--;
    }
}

ActionType.js：

export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';

4.上面5个文件对应在store/index.js中：

总结

1.创建store 暴露

    new Vuex.Store({
        state:{},
        actions:{},
        mutations:{},
        getters:{}
    })

2.main.js 中引入store
import 导入
store对象注入到Vue实例中

3. 使用vuex中的状态或actions
   方法一：
   组件内，获取状态和行为
   import {mapGetters, mapActions} from ‘vuex’
   // mapGetters 写在computed
   // mapActions 写在methods

   方法二:
   this.$store.state // 获取状态

   this.$store.dispatch(‘行为名称’); // 调用行为