前言：Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式, 它采用集中式存儲(chǔ)管理所有組件的公共狀態(tài), 并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化.
創(chuàng)新互聯(lián)建站是一家專業(yè)提供南沙企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站建設(shè)、H5場景定制、小程序制作等業(yè)務(wù)。10年已為南沙眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
Vuex的四大核心
1.state 驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源
2.mutations 基因突變 類如C# 屬性get set
3.actions 行為
4.getters 讀取器
上圖中綠色虛線包裹起來的部分就是Vuex的核心, state 中保存的就是公共狀態(tài), 改變 state 的唯一方式就是通過 mutations 進(jìn)行更改. 可能你現(xiàn)在看這張圖有點(diǎn)不明白, 等經(jīng)過本文的解釋和案例演示, 再回來看這張圖, 相信你會(huì)有更好的理解.
如何引入Vuex？
1.npm install vuex
2.裝好了之后，在全局上去使用你的Vuex
3.創(chuàng)建Store對象，最好在src創(chuàng)建一個(gè)store這樣的文件夾然后創(chuàng)建index.js
4.在main.js中注冊使用
重慶分公司
重慶分公司
import Vuex from 'vuex'
Vue.use( Vuex );
const store = new Vuex.Store({
//待添加
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
為了講解Vuex，我們做了一個(gè)項(xiàng)目，這個(gè)項(xiàng)目需要連接apicloud，異步操作使用了axios以及樣式bootstrap，其中包括了登錄注冊以及其中的父組件向子節(jié)點(diǎn)傳值等，我們給項(xiàng)目安裝相關(guān)的modules
npm install bootstrap npm install axios
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'index',
component:()=>import('../views/index.vue')
},
{
path:'/detail/:id',
name:'detail',
component:()=>import ('../views/detail.vue')
},
{
path:'/login',
name:'login',
component:()=>import ('../views/login.vue')
},
{
path:'/register',
name:'register',
component:()=>import ('../views/register.vue')
}
]
})store.js
我們來上述代碼中來講解其中vuex的奧秘，State就是所有組件提出來的data，用于所有組件公共數(shù)據(jù)，而其中mutations就像C#中g(shù)et\set，屬性賦值器，其中方法的兩個(gè)參數(shù)除了state只能帶一個(gè)參數(shù)。
actions是操作數(shù)據(jù)的方法，說過說你的actions中需要改變state中的數(shù)據(jù)，那么必須要通過commit關(guān)鍵字去提交給mutations，還有一點(diǎn)就是actions中很多操作都是關(guān)于異步處理的，最關(guān)鍵就是它是操作state數(shù)據(jù)的，那getters是什么呢？它是組件訪問vuex的入口，里面寫好了方法去操作，它也是過濾器，就像程序中的三層架構(gòu)BLL.
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import boostrap from 'bootstrap/dist/css/bootstrap.css'
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,//在全局對象上加載倉庫
components: { App },
template: '兩個(gè)組件
import Vue from 'vue'
import Vuex from 'vuex'
import API from '../utils/api.js'
var api = new API('goods')
var userApi = new API('userinfo');
Vue.use(Vuex);
const state = {
user: null,
products: []
}
const mutations = {
//加載產(chǎn)品數(shù)據(jù)
INIT_PRODUCTS(state, data) {
state.products = data;
},
SET_LOGIN_USER(state, u) {
state.user = u;
}
}
const actions = {
LOAD_PRODUCTS({ commit }) {
api.Select().then(res => {
commit('INIT_PRODUCTS', res.data);
})
},
LOGIN({ commit }, user) {
return userApi.Select().then(res => {
let users = res.data;//所有的用戶
for (let u of users) {
if (u.name == user.name && u.password == user.password) {
commit('SET_LOGIN_USER', u);
return u;
}
}
})
},
REGISTER({ commit }, user) {
return userApi.Insert(user).then(res => {
console.log(res.data);
return 'OK';
}).catch(err => {
return err;
})
}
}
const getters = {
ALL_PRODUCTS(state) {
return state.products;
},
GET_PRODUCT_BYID: (state) => function (id) {
//遍歷 is == id
for (let p of state.products) {
if (p.id == id) {
return p;
}
}
return null;
}
}
//倉庫
const store = new Vuex.Store({
state: state,
mutations: mutations,
actions: actions,
getters: getters
})
export default store;navbar.vue
product.vue 該組件用于顯示商品的詳細(xì)信息
程序入口APP.vue
注冊：通過 this.$store.dispatch去調(diào)用actions中的方法，其中有趣的是commit的參數(shù)竟然被方法名給..這個(gè)以后在思考。。
注冊
登錄
登錄
主頁面
商品列表
本文結(jié)語知識總結(jié)：
獲取url中的參數(shù)
let id = this.$route.params.id; this.details = this.$store.getters.GET_PRODUCT_BYID(id);
有的小伙伴在復(fù)制我的代碼運(yùn)行報(bào)錯(cuò)，說什么未初始化；一定要在index.vue添加這個(gè)代碼，LOAD_PRODUCTS給數(shù)據(jù)初始化
created(){
this.$store.dispatch('LOAD_PRODUCTS');
}跳轉(zhuǎn)路由
this.$router.push('/')ApiClound萬能幫助類
import crypto from 'crypto' // 加密
import axios from 'axios'
class API {
constructor(classname){
this.api = `https://d.apicloud.com/mcm/api/${classname}`;
let ID = '';
let KEY = '';
let now = Date.now(); //當(dāng)前時(shí)間
let sha1 = crypto.createHash('sha1');
sha1.update(ID + "UZ" + KEY + "UZ" + now);
axios.defaults.headers["X-APICloud-AppId"] = ID;
axios.defaults.headers["X-APICloud-AppKey"] = sha1.digest('hex') + "." + now;
}
Select(){
return axios.get(this.api);
}
Insert(obj){
return axios.post(this.api,obj);
}
Update(id,obj){
// RESTFUL API
return axios.put(this.api+`/${id}`,obj);
}
Delete(id){
return axios.delete(this.api + `/${id}`);
}
}
export default API;還有同學(xué)問我父組件和子組件如何傳值？
在父頁面引用的地方以":"表示的值都可以在子頁面的props獲取到
圖書管理
在子頁面中可以這么搞
而其中的$emit是可以調(diào)用父頁面的方法的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
