Vuex以及axios

发布时间：2020-12-16 23:18:36 所属栏目：百科来源：网络整理

导读：Vuex 简介 vuex是一个专门为Vue.js设计的集中式状态管理架构。状态？我们把它理解为在data中需要共享给其他组件使用的部分。 Vuex和单纯的全局对象有以下不同： 1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，若store中的状态发生变

Vuex

简介

vuex是一个专门为Vue.js设计的集中式状态管理架构。

状态？我们把它理解为在data中需要共享给其他组件使用的部分。

Vuex和单纯的全局对象有以下不同：

1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候，

　　若store中的状态发生变化，那么相应的组件也会相应的得到高效更新。

2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的

　　提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化，

　　从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。

安装使用vuex

　　--? npm install vuex

import Vue from 'vue''./App''./router''vuex'Vue.use(vuex)

Vue.config.productionTip = false

const store = new vuex.Store({
state: {
show: false,}
});

new Vue({
el: '#app',router,store,components: { App },template: ''
});

import Vue from 'vue'"vuex"Vue.use(Vue_x);

export default new Vue_x.Store({
state: {
show: false,},});
// 那么main.js要改成
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"

Vue.config.productionTip = false;

new Vue({
el: '#app',template: ''
});

State

简而言之~~state是保存我们data中需要共享的数据。

由于Vuex的存储是响应式的，从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。

this.$store.state.count

const Counter =

Getter

有时候我们需要从store中的state中派生出一些状态，例如对数据进行简单的计算。

并且很多组件都需要用到此方法，我们要么复制这个函数，要么抽取到一个公共函数，多处导入。

我们vuex提供了更加方便的方法，getter ，它就像计算属性一样，getter的返回值会根据它的依赖被

缓存起来，只有它的依赖发生改变时，才会重新计算。

Getter会接收state作为其第一个参数：

import Vue from 'vue'"vuex"Vue.use(Vue_x);

export default new Vue_x.Store({
state: {
count: 20,// 通过 this.$store.getters.my_func
 getters: {
my_func: function (state) {
return state.count * 2
}
},});

Getter也可以接收getters为第二个参数：

import Vue from 'vue'"vuex"Vue.use(Vue_x);
export <span style="color: #0000ff;">default  <span style="color: #0000ff;">new<span style="color: #000000;"> Vue_x.Store({

state: {

count: 20<span style="color: #000000;">,<span style="color: #008000;">//<span style="color: #008000;"> 通过 this.$store.getters.my_func

<span style="color: #000000;">  getters: {

my_func: <span style="color: #0000ff;">function<span style="color: #000000;"> (state) {

<span style="color: #0000ff;">return state.count * 2<span style="color: #000000;">

},<span style="color: #008000;">//<span style="color: #008000;"> 通过 this.$store.getters.my_func_count

my_func_count: <span style="color: #0000ff;">function<span style="color: #000000;"> (state,getters) {

<span style="color: #0000ff;">return<span style="color: #000000;"> getters.my_func.length

}

},});

Mutation

更改Vuex中的store中的状态的唯一方法是提交mutation。

每个mutation都有一个字符串的事件类型(type)，和一个回调函数handler。

也就是说我们要触发mutation中定义的方法(type)，然后才会执行这个方法(handler)。

这个方法就是我们更改状态的地方，它会接收state为第一个参数，后面接收其他参数：

import Vue from 'vue'"vuex"Vue.use(Vue_x);

export default new Vue_x.Store({
state: {
count: 20,// 需要通过 this.$store.commit('increment',10)
 mutations: {
increment (state,n) {
// 变更状态
state.count += n
}
}

});

Mutation需要遵守Vue的响应规则

既然vuex中的store中的状态是响应式的，那么当我们状态变更时，监视状态的vue组件也会更新。

这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项：

　　-- 1，最好提前在你的store中初始化好所有的所需要的属性

　　-- 2，当对象需要添加属性时，你应该使用

　　　　　　--? Vue.set(obj,'newProp',123)

　　　　　　--? 以新对象代替老对象? state.obj = { ...state.obj,newProp: 123}

axios

简单使用

基于Promise的HTTP请求客户端，可以同时在浏览器和node.js使用。

使用npm安装axios

　　-- npm install axios -D

基本的配置

import axios from "axios"Vue.prototype.$axios = axios

// 组件中
methods: {
init () {
this.$axios({
method: "get",url: "/user"
})
},};

基本的使用

.$axios.get(123 }).(

.$axios.post("Python""19.88" }).(

.$axios.get('/course/12' .$axios.get('/course'()

that = 'get' (data.status === 200=(

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!