Vuex :
vuex是一个专门为Vue.js设计的集中式状态管理架构.
状态: 可以理解为在data中需要共享给其他组件使用的部分.
Vuex和单纯的全局对象的不同:
1. Vuex的状态存储是响应式的.
当vue组件从store中读取状态的时候, 若store中的状态发生改变, 那么相应的组件也会得到高效更新.
2. store中的状态不能直接进行改变, 改变store中的状态的唯一途径就是显示的提交(commit)mutation. 这样使得我们可以方便的跟踪每一个状态的变化, 从而让我们能够实现一些工具来帮助我们更好的了解我们的应用.
注意事项 :
仓库中的数据建议都放在计算属性下
安装使用Vuex:
安装:
npm install vuex
配置:
导入vuex: import vuex from "vuex"
使用vuex: vue.use(vuex)
// main.js import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import vuex from ‘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: ‘<App/>‘ });
// 为了方便维护，我们通常把在src下面新建一个store文件夹， // 然后在里面新建一个index.js import Vue from ‘vue‘ import Vue_x from "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‘, router, store, components: { App }, template: ‘<App/>‘ });
State:
简而言之, state是保存我们data中需要共享的数据的
由于Vuex的存储是响应式的, 从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态.
实例化仓库:
new vuex.Store({ state: {}, //共享的数据 gettres:{}, //可以进行二次加工 mutations:{} //更改vuex中的store的状态的方法 })
在Vue实例对象中注册:
new Vue({ el: "#app", store, })
获取仓库中的数据:
this.$store.state.xxx
this.$store.getters.xxx
// 创建一个组件 const Counter = { template: `<div>{{ count }}</div>`, computed: { count(){ return this.$store.state.count } } };
Getter:
有时候需要从store中的state中派生出一些状态, 例如对数据进行简单的计算.
并且很多组件都需要用到此方法, 我们要么复制这个函数, 要么抽取到一个公共函数, 多处导入.
vuex提供了更加方便的方法, getter, 它就像计算属性一样, getter的返回值会根据它的依赖被缓存起来, 只有他的依赖发生改变时, 才会重新计算.
Getter会接受start作为其第一个参数:
import Vue from ‘vue‘ import Vue_x from "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会接受getter作为其第二个参数:
import Vue from ‘vue‘ import Vue_x from "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 }, // 通过 this.$store.getters.my_func_count my_func_count: function (state, getters) { return getters.my_func.length } }, });
Mutation:
更改Vuex中的store中的状态的唯一方法是提交mutation.
每个mutation都有一个字符串的事件类型, 和一个回调函数handler.
也就是说要触发mutation中定义的方法, 然后才会执行这个方法(handler).
这个方法就是更改状态的方法, 他会接受state为第一个参数, 后面接收其他参数.
Mutation的基本使用:
import Vue from ‘vue‘ import Vue_x from "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)
以新对象代替老对象 start.obj = {...state.obj, newProp: 123}
axios的简单使用:
基于Promise的HTTP请求客户端, 可以同时在浏览器和node.js使用.
实现ajax技术的工具
安装:
npm install axios
配置:
导入: import axios from "axios"
在vue原型链中加入方法: vue.prototype.$axios = axios
// main.js import axios from "axios" Vue.prototype.$axios = axios // 组件中 methods: { init () { this.$axios({ method: "get", url: "/user" }) }, };
基本使用:
methods: { init(){ var that = this this.$axios.request({ url: that.$store.state.apiList.course, method: ‘get‘ }).then(function (data) { if (data.status === 200){ that.courseList = data.data } }).catch(function (reason) { console.log(reason) }) } },