vuex 注册 + 更改值 + 提交载荷 + Action（逻辑层） + 派生属性 getter + module 模块化

安装依赖 npm install --save vuex

1. 每一个 Vuex 项目的核心就是 store（仓库）。 store 就是一个对象，它包含着你的项目中大部分的状态
   (state)。
2. state 是 store 对象中的一个选项，是 Vuex 管理的状态对象（共享的数据属性）
   建立vuex文件

vuex 它虽然在切换路由的时候可以获取到状态值， 但是如果刷新了就没有了
可以结合 loacl storage 或 session使用
（seesion 关闭浏览器清空）

loacl storage 除非主动清空 不然不会失效

注册

使用全局 和 通过点击更改全局

---

提交载荷

---

Action

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
在组件中通过 this.$store.dispatch(‘actionName’) 触发状态值间接改变
Action 也支持载荷
Action 可以包含任意异步操作。
不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
相当于是逻辑层

// 调用方法

派生属性 getter

有时候我们需要从 store 中的 state 中派生出一些状态。
例如：基于上面代码，增加一个 desc 属性，当 count 值小于 50，则 desc 值为 吃饭 ; 大于等于 50 小于
100，则desc 值为 睡觉 ; 大于100 , 则 desc 值为 打豆豆 。这时我们就需要用到 getter 为我们解决。
getter 其实就类似于计算属性(get)的对象.
组件中读取 $store.getters.xxx

//获取

以module模块化项目结构 （便于管理）可以把home抽取出来文件 下面会展示

import Vue from "vue";
import Vuex from "vuex";

// //引入vuex插件
Vue.use(Vuex);

// 以module模块化项目结构
// 可以把home抽取出来文件 
const home = {
    //定义全局变量
    state:{
        count:0
    },
    // 函数
    mutations:{
        //定义更改全局变量函数
        // 载荷参数   n
        increCount(state, n){
            // state.count++
            state.count += n
        },
        subtractCount(state){
            state.count--
        }
    },
    // Action 类似于 mutation，不同在于：
    //     Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
    //     在组件中通过 this.$store.dispatch('actionName') 触发状态值间接改变
    //     Action 也支持载荷
    //     Action 可以包含任意异步操作。
    //     不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
    actions:{
        // context 上下文  n 为载荷参数   increCount 调用mutations 里面的函数
        add(context, n){
            context.commit('increCount', n);
        },
        //按需导入   commit 提交函数   state全局变量
        decrement({commit, state}){
            console.log('全局参数', state.count)
            commit('subtractCount')
        }
    },
    //派生属性
    getters:{
        //会获取到上面的state
        remark(state){
            if(state.count < 50){
                return "吃饭";
            }else if(state.count < 100){
                return "睡觉";
            }else{
                return "打豆豆";
            }
        }
    }
}

const goods = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
}
const store = new Vuex.Store({   // 注意V和S都是大写
    modules:{
        home,
        goods
    }
});
export default store

<template>
  <div class="home">
     <!-- 调取全局变量 -->
     <!-- count : {{$store.state.count}} -->
     <!-- 以module模块化项目结构 （便于管理） 只需要更改获取参数state的这 别的不需要更改 -->
    count : {{$store.state.home.count}}
    <button @click="addCount">增加值</button>
    <button @click="decCount">减少</button>
    <h1>{{$store.getters.remark}}</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  methods:{
    addCount(){
      //通过commotion  调用 mutations 中的 increment 改变状态值
      //多个参数, 叫提交载荷
      // this.$store.commit('increCount', 10);

      // 触发 actions 中的 add 改变状态值
      this.$store.dispatch('add', 10);
    },
    decCount(){
      // this.$store.commit('subtractCount');
      this.$store.dispatch('decrement');

    }
  }
};
</script>

标准项目结构 – 抽取文件标准化

跟级别的是公共的

home.js

const state = {
    count:0
}

//派生属性
const getters = {
        //会获取到上面的state
        remark(state){
            if(state.count < 50){
                return "吃饭";
            }else if(state.count < 100){
                return "睡觉";
            }else{
                return "打豆豆";
            }
        }
}

const mutations = {
    //定义更改全局变量函数
    // 载荷参数   n
    increCount(state, n){
        // state.count++
        state.count += n
    },
    subtractCount(state){
        state.count--
    }
}
// Action 类似于 mutation，不同在于：
//     Action 提交的是 mutation，而不是在组件中直接变更状态， 通过它间接更新 state。
//     在组件中通过 this.$store.dispatch('actionName') 触发状态值间接改变
//     Action 也支持载荷
//     Action 可以包含任意异步操作。
//     不建议直接更改mutation 最好在action中写逻辑之后再mutation改变
const actions = {
        // context 上下文  n 为载荷参数   increCount 调用mutations 里面的函数
        add(context, n){
            context.commit('increCount', n);
        },
        //按需导入   commit 提交函数   state全局变量
        decrement({commit, state}){
            console.log('全局参数', state.count)
            commit('subtractCount')
        }
}

export default {
    state,
    getters,
    mutations,
    actions
}

index.js

import Vue from "vue";
import Vuex from "vuex";
import home from "./modules/home.js"
import goods from "./modules/goods.js"
// //引入vuex插件
Vue.use(Vuex);

// 以module模块化项目结构

const store = new Vuex.Store({   // 注意V和S都是大写
    modules:{
        home,
        goods
    }
});
export default store