vuex和vue-router路由

vuex和vue-router路由

一、vuex

vuex是什么？为什么要用它?

vuex用来解决多个组件共享状态的情况，是一个共用池，即store文件里面的，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。解决复杂组件间传值问题，主要用于中大型单页应用中。

安装

方法一：脚手架vuecli创建时勾选vuex选项，会自动创建

方法二：npm 、cnpm、yarn安装

npm install vuex@next ---save
cnpm install vuex@next ---save
yarn add vuex@next ---save

安装好后在store文件里面创建用来共享的属性(index.js)

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
//数据，相当于computed
  getters: {
    
  },
  //里面定义方法，操作state里面的值，相当于methods
  mutations: {
    
  },
  // 异步方法  操作mutations里面的方法
  actions: {
    
  },
//模块
  modules: {
    
  },
})

然后在main.js中引入即可

import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

vuex包含5部分，State,Getter,Mutation,Action,Module，那么存好了之后，怎么调用呢？方法如下：

1.调用State里面的数据（State：放状态的，单一状态树，里面存的是数据源，共享的那个数据）

(1)通过computed的计算属性直接赋值

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

(2)通过mapState的对象来赋值。 mapState:当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

//从vuex中导出store文件夹里js文件中的state对象，map是映射的意思  
//注：使用mapState必须将...mapState({xx})放在computed里的第一个
import{mapState}from 'vuex';
computed:{
	...mapState({
    	count:state=>state.count
	}),
	xx(){
		...
	},
	yy(){
		...
	},
}

(3)通过mapState的数组来赋值

computed:mapState(['count'])

2.改变state里面的值，调用mutations

(1)$store.commit(‘xx’,value)

state:{
	count:0
},
mutations: {
    add(state,num) {
    	state.count += num;
    },
}

<button @click="$store.commit('add',10)"></button>

(2)使用mapMutations

state:{
	count:0
},
mutations: {
    add(state,num) {
    	state.count += num;
    },
}

<button @click="add(10)"></button>
import { mapMutations } from 'vuex';
methods:{
	...mapMutations(['add'])
}

3.getters(计算过滤操作，相当于计算属性)，调用getters里面的属性

(1)$store.getters.xx

state:{
	count:0
},
getters:{
    count(state){
        state.count += 100
    }
}

computed:{
    count(){
        return this.$store.getters.count;
    }
}

(2)使用mapGetters

import {mapGetters} from 'vuex';
computed:{
    ...mapGetters(['count'])
}

4.actions异步修改状态(跟mutation的作用差不多)

state:{
	count:0
},
mutations: {
    add(state,num) {
    	state.count += num;
    },
}
actions:{
    addAction({commit}){
        commit('add',10);
    },
}

<button @click="addAction"></button>
import {mapActions} from 'vuex';
methods:{
    ...mapActions(['addAction'])
}

注：mutations与actions的区别：mutations是同步的，actions是异步的

5.module模块组（state,mutations,getters,actions是一个模块组，需要用到不同的模块，调用模块名就行。）

//store文件夹下的js文件：
moduleA:{
    state,
    mutations,
    getters,
    actions
}

export default new Vuex.Store({
    modules:{
        a: moduleA
    }
})

//在组件中调用：
$store.state.a.count

二、vue-router

用于构建单页面应用，vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换，有hash和history两种方式，安装与vuex类似，在vue中实现页面间跳转有两种方式:router-link和编程式导航。

同样router文件下面的js文件里面配置路径

const routes = [
  {
    path: '/',
	//重定向
	redirect:'/xx',
	//别名
	alias:'/yy',
    name: 'Home',
	//对应的组件页面
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
        path: '/test',
        name: 'test',
        component: Test,
        children:[
            {
                path: 'test1',
                name: 'test1',
                component: Test1,
            }
        ]
  	},
]
//注：redirect和alias的区别：redirect:直接改变了url的值，把url变成了真实的path路径
alias:URL路径没有被改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容 

1.router-link（类似a标签）与router-view一起使用

//to后面的即要跳转的路径
<router-link to="/test">测试</router-link>
//子路由
<router-link to="/test/test1">测试子路由1</router-link>

//注：跳转的页面 需加个<router-view></router-view>标签,位置在哪，页面就出现在哪里
//router-view路由视图，这就是按钮切换的部分

//参数传递   跳转页面获取参数 $route.params.属性 如$route.params.name
<router-link :to="{name:'test1',params:{name:'xx',age:18}}">测试</router-link>

//利用URL传参
<router-link to="/testURL/传的参数">URL传参</router-link>
//例如：
<router-link to="/testURL/5/zhangsan">URL传参</router-link>
//配置router文件
path:'/testURL/:对应的参数名'  如：path: '/testURL/:userid/:username'
//跳转页面获取参数$route.params.属性 如$route.params.userid，$route.params.username

2.编程式导航($router)

<button @click='goBack'>后退</button>
<button @click='goForward'>前进</button>
<button @click='goHome'>返回首页</button>

methods:{
    goBack(){
        this.$router.go(-1);
    },
    goForward(){
        this.$router.go(1);
    },
    goHome(){
        this.$router.push('/');
    }
}

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
//除了push外，还有replace和resolve 
1.this.$router.replace同样是跳转，但与push的区别在于push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，不会向 history 栈添加一个新的记录

2.this.$router.push({path: '/homo', replace: true})设置replace属性（默认值：false）的话，当点击时，会调用router.replace()，而不是router.push()，于是导航后不会留下history记录。即使点击返回按钮也不会回到这个页面。

this.$router.resolve用来解决路由模式从hash换为history，window.open不能跳转
const { href } = this.$router.resolve({path:`/xx`})
window.open(href, '_blank') // _blank 打开新的页面

这次的分享就到这里啦 ，欢迎大家来评论区补充哦！