vueh和vuex的学习

---

vue的路由：

导入路由

import VueRouter from 'vue-router';

使用路由

//使用路由
Vue.use(VueRouter);

配置路由模式

 //路由模式要加#，开启这个之后就不用加#
    mode: 'history',

配置路由的模式，路径就不用加#

路由的配置

//整合所有路由的仓库
    routes: [{
        //登录页相关路径
        //：name 是一种取值方式
        path: '/index/:name',
        //组件
        component: index,
        props: true,
        children: [ //嵌套路由
            {
                path: '/user/list:idd',
                name: 'List',
                component: List,
                props: true,
            },
            //
            {
                path: '/user/profile:id',
                name: 'profile',
                component: profile,
            },
            {
                path: '/user/all',
                name: 'all',
                component: all,
            },
            {
                path: '/user/test1',
                name: 'test1',
                component: test1,
            },
            {
                path: 'user/add',
                name: 'add',
                component: add,
            },
            {
                path: '/user/insert',
                name: 'insert',
                component: insert,
            },
            {
                path: '/user/Update',
                name: 'Update',
                component: Update,
            },
        ]
    },
        //首页
        {
            //路径为/login绑定login页面组件
            name: 'login',
            path: '/login',
            component: login,
        },
        //首页2
        {
            //路径为/login绑定login页面组件
            name: 'loginTest',
            path: '/loginTest',
            component: loginTest,
        },
        //重定向
        {
            //路径为/goHome重定向到路径为/login
            path: '/goHome',
            redirect: '/login',
        },
        //页面走丢，所有的页面
        {
            path: '*',
            //组件名字为NotFound绑定*路径
            component: NotFound,
        },
   
    ]

上面的配置包含了子路由的配置，也就是父路由包含了子路由。然后还有重定向，找不到地址跳转到错误页面的配置，他是根据路径来查找，如果有路径就会找到相对应的组件页去渲染我们的数据和展示页面。

---

然后要使用路由，就要在main.js里面进行配置，把配置好的routers导进来main.js。

import router from './routers'

 // 主函数调用路由
    router,

---

vuex的vuex学习

vue快速入门

vuex快速入门

深入理解vuex

1. 设置状态在state
2. 获取内容在getters
3. 更新数据在mutations
4. 异步操作在actions
5. 模块拆分modules

Vue项目中使用 npm 下载安装（需要安装 Node 环境）

// 下载
npm install vuex --save

// 安装
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

有一种方式可以优化getters方法，就是使用mapGetters插件

//从vuex引入mapGetters  导入mapGetters
import {mapGetters} from 'vuex';

然后用计算属性把定义和方法拿过来，就免去以前用方法定义的方式去拿到值

  //计算属性
  computed: {
    //映射
    ...mapGetters([
      'getUser'
    ])
  }

./store/index.js

import Vue from 'vue'


//导进了vuex
import Vuex from 'vuex'
//相当于java里面创建实体类
Vue.use(Vuex);
export default new Vuex.Store({
    //状态  存放数据
    state: {
        //从localStorage里面获取值
        userinfo: JSON.parse(localStorage.getItem("userinfo")),
        // userinfo: localStorage.getItem("userinfo ")
        test: 0,
        test1: 111,
    },

    //更新数据
    mutations: {
        //从一些方法里面创建axios中获取数据放进这个变量里面，如果是对象的话要转换json
        SET_USERINFO: (state, userinfo) => {
            state.userinfo = userinfo;
            localStorage.setItem("userinfo ", JSON.stringify(userinfo));
        },
        totest(state, test) {
            state.test += test;
        },
        add(state) {
            state.test1 = state.test1 + 1;
        }

    },

    //创建get方法  让其他方法获得state状态，这个状态里面拥有数据
    // mapgetters 也就是getters的映射 。
    getters: {
        getUser: state => {
            return state.userinfo;
        },
        gettest: state => {
            return state.test1;
        },
        add: state => {
            return state.test;
        }
    },
    //异步请求
    // 这个的意思就是去请求修改mutations里面的修改数据的方法，
    // 因为mutations里面的方法不能异步，只能同步，可以这么理解，actions就是mutations的代理

     在 action 中，不能直接修改 state 中的数据
    //         // 必须通过 context.commit() 触发某个 mutation 才行
    actions: {
        //异步方法名
        addAsync(context, test) {
            setTimeout(() => {
                context.commit('totest', test)
            }, 1000)
        }
    },


    //模块化  那什么时候使用这个模块化呢，就是当项目变得很大时候，要分离出去
// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
    modules: {}
});

/test.vue

<template>
  <div>
    {{ getUser }}
    <button @click="totest">改变值</button>
    <button @click="addAsyn">异步延迟改变值</button>
    {{ this.$store.state.test }}
    <button @click="USERINFO">点击添加userinfo</button>
    <br>
    <hr></hr>
    <p>getters得到的值</p>
    {{ this.$store.getters.gettest }}<br>


    <hr></hr>
    <p>计算属性算出的数据</p>
    MapStore: {{ test }}<br>
    mapGetters: {{ gettest }}
    <button @click="add1">添加</button>
    {{ test1 }}
  </div>
</template>

<script>


//测试vuex的使用

//从vuex引入mapGetters函数
import {mapGetters, mapState} from 'vuex'

export default {
  name: "test",
  data() {
    return {
      userinfo: 'hello world',
      // test: 0,
    }
  },

  methods: {
    totest() {
      this.test = this.$store.commit('totest', 234);
    },
    addAsyn() {
      // 调用dispatch触发actions时携带参数
      this.$store.dispatch('addAsync', 34);
    },
    USERINFO() {
      this.$store.commit('SET_USERINFO', "hello vuex");
    },
    add1() {
      this.$store.commit('add');
    },
  },

//创建，点击页面就会自启动
  created() {
    this.totest();
  },

// //计算属性
  computed: {
    //映射

    //使用这种函数，就不用使用原始的方式去获得数据了
    ...
        mapState([
          'test'
        ]),
    ...
        mapGetters([
          'gettest',
          'getUser',
          'add',
        ])
  }
}

</script>

<style scoped>

</style>