关于git和vuex的辅助函数的讲解_vuex使用git-优快云博客

git
首先是git的安装:
第一步，打开浏览器，在百度搜索中输入git下载（直接搜索git也可以）。
第二步，在git下载页面中，选择你的系统类型，这里我选择Windows，如果是苹果系统要选择苹果系统。
第三步，点击系统类型后，网站会自动进行下载最新版，然后选择文件保存地址（浏览器不同下载模式也会不同，视自己情况而定）。
第四步，文件下载完成后，双击打开文件，进行安装。
第五步,安装好后就还要在在git中配置你的账号和密码,具体如下:

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

git的常用命令

git init              // 初始化git仓库管理
git status            // 查看状态
git add .             // 全部添加到暂存区
git commit -m ""      // 添加到本地管理仓库
git log               // 查看提交日志
git reflog            // 查看所有提交日志
git checkout          // 切换分支，重置工作区文件状态
git diff              // 查看工作区和暂存区的变化
git reset             // 将暂存区 恢复到 工作区，恢复到哪个版本
git reset --hard 386ecb //将回退到哪个版本
git rm                // 删除指定文件 
git branch dev        // 创建dev分支
git branch            // 查看所有分支
git merge dev         // 分支合并
git checkout -b login // 创建并且切换到login分支
git branch -d dev     // 删除指定分支

vuex的辅助函数
vuex的辅助函数，就是将vuex里面的state，mutations，getters，actions拿到当前页面的，可以直接使用，具体案例如下：

vuex中：
export default new Vuex.Store({
  state: {
    //state状态存储一个对象
    user: {
      name: "珂珂",
      sex: '女',
      id: 'saodaodkoa1212',
      tel: 13899999999,
      age: 17
    },
    beal: true,
  },
  // 相当于vue中的computed属性 只不过 getters是用于vuex的计算属性
  getters: {
    // getter方法会接收一个参数state其实就是 store中的state方法
    changeAge(state) {
      state.user.age++
      return state.user.age
    }
  },
  mutations: {
    //第一个参数是store中的数据，第二个是传过来的数据
    changeTel(state, val) {
      state.user.tel = val
    },
    synchronization(state,val){
      // console.log(state,val)
      state.user.sex = val
    }
  },
  actions: {
    // 异步处理通过触发mutations来进行异步操作
    asynchronous(context,val){
      setInterval(() => {
      context.commit('synchronization',val)
      }, 2000);
    }
  },
  })

这是在home页面中使用vuex的辅助函数的具体操作:
<div class="home">
    <!-- 用户名就是标准获取store中的数据 -->
    用户名: {{ $store.state.user.name }}<br />
    性别: {{ $store.state.user.sex }}<br />
    手机号: {{ user.tel }}<br />
    <!-- <input type="text" v-model="user.name"> -->
    年龄: {{ changeAge }}<br />
    <button @click="exitUser">修改电话号码</button><br />
    模块里面的getters属性: {{ changeDate1 }}<br />
    <button @click="exitasynchronous">异步修改</button>
  </div>

<script>
//引入vuex的辅助函数
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
// 插件刷新后不丢失数据
import createPersisted from "vuex-persistedstate";
export default {
  name: "Home",
  computed: {
    // 当数据多的时候写$store.state会很麻烦，所以我们可以可以使用辅助函数mapstate,
    // 相当于把store中定义的对象user隐士的拿到home中的date中，可以直接获取数据
    ...mapState(["user"]),
    // 当数据多的时候写$store.mutations会很麻烦，所以我们可以可以使用辅助函数mapMutations,
    // 相当于把mapMutations中定义的函数隐士的拿到home中的date中，可以直接获取数据 -->
    ...mapGetters(["changeAge", "changeDate1"]),
  },
  methods: {
    // 当数据多的时候写$store.mutations会很麻烦，所以我们可以可以使用辅助函数mapMutations,
    // 相当于把mapMutations中定义的函数隐士的拿到home中的date中，可以直接获取数据 -->
    ...mapMutations(["changeTel"]),
    exitUser() {
      this.changeTel(15088888888);
      //  <!-- 用户名就是标准获取mutations中的数据 -->
      // this.$store.commit("changeTel",15088888888) 这种触发函数并携带参数的方法叫做载荷
    },
    ...mapActions(["asynchronous"]),
    exitasynchronous() {
      this.asynchronous("美女");
      //  <!-- 用户名就是标准获取mutations中的数据 -->
      // this.$store.dispatch('asynchronous',"美女")
    },
  },
};
</script>