[学习笔记] Vuex 保存登入的用户名

这篇是透过网路教学资源自我学习，并将学到的东西做个纪录
主要是在说明各个component中(XXX.vue 独立分割的component)如何透过Vuex来存取资料
网路教学资源:https://www.bilibili.com/video/av62476309

Login.vue

<el-input v-model="ruleForm.userId" placeholder="请输入会员帐号" class="loginInput"></el-input><script>import { mapMutations } from "vuex";export default {  name: "Login",  methods: {    ...mapMutations(["setUserId"]),    login(formName) {      this.$refs[formName].validate(valid => {        if (!valid) {          return false;        } else {          this.setUserId(this.$refs[formName].model.userId);          this.$router.replace({ path: "/" });        }      });    }  }};</script>

main.js

import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  // 存放全局资料(共用的资料)  state: {    userId: "",    nickName:"AABBCC"  },  // 过滤，比较，取得状态资料的方法，操作状态(似计算属性)  getters: {    userId(state) {      return state.userId || sessionStorage.getItem("loginId")      // 如果state里面的userId没有值，改用一开始输入帐号后存进sessionStorage的值      // 解决vue 刷新后(重新整理 F5)数据会跟着刷掉的问题    }  },  // 更动资料的地方(似事件)  mutations: {    setUserId(state, val) {      state.userId = val;      sessionStorage.setItem("loginId", val);    }  }})new Vue({  el: '#app',  router,  store,  components: { App },  template: '<App/>',  render: h => h(App)})

AppNavbar.vue

<span>{{userId}}</span><script>import { mapGetters } from "vuex";export default {  name: "AppNavbar",  computed: {    ...mapGetters(["userId"])  }}</script>

---

...(ES6 展开语法):
参考资料(MDN):https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

♛♛ 範例 ♛♛

// 範例1 ======================================var arr = [1, 2, 3];var arr2 = [...arr]; // like arr.slice()arr2.push(4); // arr2 此时变成 [1, 2, 3, 4]// arr 不受影响console.log(...arr) // 1 2 3 4 ，会展开而非是一个阵列console.log(arr) // [1,2,3,4]// 範例2 =======================================var obj1 = { foo: 'bar', x: 42 };var obj2 = { foo: 'baz', y: 13 };var clonedObj = { ...obj1 };// 克隆后的对象: { foo: "bar", x: 42 }var mergedObj = { ...obj1, ...obj2 };// 合并后的对象: { foo: "baz", x: 42, y: 13 }

个人理解与整理:
...展开语法，可以将整个资料(参数，对象...等)整个搬移，不管内容有多少
但是，当物件属性的名称相同时，后面的值会覆盖(範例2)

!! 所以 ...mapGetters(["userId"]) => 可以将getters里的userId整个资料带入
或者多笔资料，如: ...mapGetters(["userId","nickName"])

---

Vuex辅助函数用法:
(Vuex辅助函数：mapState、mapGetters、mapMutations、mapActions。)

原始写法:
在要取得资料的vue档案中这么写(AppNavbar.vue)

computed: {    userId() {      return this.$store.state.userId;    } },

透过Vuex辅助函数+(ES6 展开语法)写法:

computed: {    ...mapGetters(["userId"]) },

透过mapGetters引入资料 => 从(档案位置: main.js )store的getters找userId，

♛♛ 範例 ♛♛
变成我们不用自己一个变数就要写一个
userId() {return this.$store.state.userId;}
nickName() {return this.$store.state.nickName;}

♛♛ 同理 ♛♛
...mapMutations(["setUserId"]) => 从(档案位置: main.js )store的mutations找setUserId

!!! 注意 !!!
要使用 mapMutations ，要先从vuex import进来才会有作用
import { mapMutations } from "vuex";

要使用Vuex辅助函数 + ES6展开语法，才有办法设置vue档案各自的computed

    {{ priceUSA }}   <script>       import { mapGetters } from "vuex";       export default {         name: "AppNavbar",         computed: {             priceUSA(){               return this.price / 7 ;             },             ...mapGetters(["userId"])         },         data(){             return {                 price:200             }         }       }   </script>

---

this.setUserId(this.$refs[formName].model.userId):

Login.vue

  methods: {    ...mapMutations(["setUserId"]),    login(formName) {      this.$refs[formName].validate(valid => {        if (!valid) {          return false;        } else {          this.setUserId(this.$refs[formName].model.userId);          this.$router.replace({ path: "/" });        }      });    }  }

因为已经引入资料

...mapMutations(["setUserId"])

所以可以直接调用，并将input内的值传给setUserId应用

this.setUserId(this.$refs[formName].model.userId);

前端新手，纪录学到的新东西，如有错误观念再麻烦纠正，谢谢