前言：Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex的四大核心
1.state 驱动应用的数据源
2.mutations 基因突变 类如C# 属性get set
3.actions 行为
4.getters 读取器
上图中绿色虚线包裹起来的部分就是Vuex的核心, state 中保存的就是公共状态, 改变 state 的唯一方式就是通过 mutations 进行更改. 可能你现在看这张图有点不明白, 等经过本文的解释和案例演示, 再回来看这张图, 相信你会有更好的理解.
如何引入Vuex？
1.npm install vuex
2.装好了之后，在全局上去使用你的Vuex
3.创建Store对象，最好在src创建一个store这样的文件夹然后创建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，我们做了一个项目，这个项目需要连接apicloud，异步操作使用了axios以及样式bootstrap，其中包括了登录注册以及其中的父组件向子节点传值等，我们给项目安装相关的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: 'https://www.jb51.net/', 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，用于所有组件公共数据，而其中mutations就像C#中get\set，属性赋值器，其中方法的两个参数除了state只能带一个参数。
actions是操作数据的方法，说过说你的actions中需要改变state中的数据，那么必须要通过commit关键字去提交给mutations，还有一点就是actions中很多操作都是关于异步处理的，最关键就是它是操作state数据的，那getters是什么呢？它是组件访问vuex的入口，里面写好了方法去操作，它也是过滤器，就像程序中的三层架构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: '<App/>' })
两个组件
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 = { //加载产品数据 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
<template> <nav> <div> <a href="#" >购物车</a> <ul> <li v-if="user!==null"> <a data-toggle="dropdown" @click="showDropdown=!showDropdown">欢迎你:{{user.name}} </a> <div> <a href="#" >我的订单</a> <div></div> <a >注销</a> </div> </li> <li v-if="user===null"> <router-link to="/login">登录</router-link> </li> <li v-if="user===null"> <router-link to="/register">注册</router-link> </li> </ul> </div> </nav> </template> <script> export default { data(){ return{ showDropdown:false } }, computed:{ user(){ return this.$store.state.user; } } } </script>
product.vue 该组件用于显示商品的详细信息