vueX 的使用

盼望每天都能看到你,雨天也风和日丽

项目地址

众做周知 vueX不能做永久存储, 所以咱们项目里面会用到 一个库文件来配合 vueX进行使用 将参数进行序列化存入本地 然后取值的时候在序列化出来
good-storage 官方地址
使用

store.dispatch 会调用 actions中的方法 
而 actions 会 通过 commit 调用 mutations 中的方法 
mutations 再去设置 state 中的值

读取 vueX中的值

1. 像文档说的一样 先将 vueX进行引入

npm install vuex --save
然后引入 配置到项目里面

2. 引入之后 创建咱们自己的文件夹 按照文档说的进行创建

建在外层文件目录
文档地址

我这个案例 接下来创建文件夹
创建 store 下的 index 文件 与 cache 文件

接下来就是使用了

<template>
   <div>
       <div @click="add">  增加  </div>
       <div>{{num}}</div>
       <div @click="del">  减少  </div>

       <button @click="jump">跳转</button>
   </div>
</template>

<script>
   import store from '@/store';
   import { loadStorage } from '@/store/cache';
   export default {
       data() {
           return {
               token: '',
               num: 0,
           }
       },
       created() {
           this.num = loadStorage('num');
       },
       methods: {
           add() {
               this.num += 1;
               this.set();
           },
           del() {
               this.num -= 1;
               this.set();
           },
           set() {
               store.dispatch('setNum', this.num);
           },
           jump() {
               this.$router.push({
                   path: '/twopage'
               })
           }
       },
   }
</script>

下一个页面

<template>
    <div>
        {{num}}----- <br/>
        {{token}}
    </div>
</template>

<script>
    import store from '@/store';
    import { loadStorage } from '@/store/cache';
    export default {
        data() {
            return {
                num: undefined,
                token: ''
            }
        },
        created() {
            this.num =   loadStorage('num')
            this.token = loadStorage('token')
        },
    }
</script>