vuex基础入门

Vuex简介

vuex的安装和组成介绍

[外链图片转存失败(img-nWQUUuyh-1565273314232)(https://upload-images.jianshu.io/upload_images/11158618-9e09a269f0a0fb6c.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

vuex简介

vuex是一个专门为vue.js应用程序开的状态管理模式

它采用集中式存储管理应用的所有组件的状态

并以相应的规则保证以一种可预测的方式发生变化

应用场景

移动端开发和工程化开发有丰富经验

uejs，node以及小程序有深入研究

多个视图依赖于同一状态

来自不同视图的行为需要改变同一个状态

vue安装和组成介绍

state

数据仓库

getter

用来获取数据的

mutation

用来修改数据的

action

用来提交mutation

安装vuex

安装vuex包，npm install vuex

创建vuex实例: new Vuex.store()

main.js中将vuex实例挂载到vue对象上

安装vuex实战

[外链图片转存失败(img-POIIhS9C-1565273314234)(https://upload-images.jianshu.io/upload_images/11158618-6a6a3923bb48486d.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-LhSjXOMF-1565273314236)(https://upload-images.jianshu.io/upload_images/11158618-c6e156dad735950b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-o8jeXWJs-1565273314239)(https://upload-images.jianshu.io/upload_images/11158618-cc4bf5a3abe6f244.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

vue create vuex-demo

cd vuex-demo

code .

npm serve

yarn add vuex

main.js

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
 state: {
  count: 0
 }
})

yarn serve

count++简介

state

中创建count字段

mutations

中创建一个count++ 的mutation

button

新增click事件触发mutation改变count

count++实战

const store = new Vuex.store({
 state: {
  count: 0
 },
 mutations: {
  countIncrease(state) {
   state.count++
  }
 // 第二种
 countIncrease(state, v) {
   state.count = v
  }
 }
})

new Vue({
 store,
 render: h=> h(App)
}).$mount("#app")

App.vue

<template>
 <div id="app">
  <h1>count: {{this.$store.state.count}}</h1>
 <h1>count:{{count}}</h1>
 <button @click="countIncrease"></button>
 </div>
</template>

methods: {
 countIncrease() {
  const v=100;
  this.$store.commit('countIncrease', v)
 }
}

分析

账号登录

不同的课程需要不同的会员等级

普通会员

vip会员

高级会员

功能

通过state.userInfo控制用户登录路由限制

多组件共享state.userStatus和state.vipLevel状态

多组件修改state.userStatus和state.vipLevel

index.js

const store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

Vue.use(Vuex)

exprot default store;

store文件

action.js
getter.js
index.js
mutations.js
state.js

[外链图片转存失败(img-MSTswUjk-1565273314246)(https://upload-images.jianshu.io/upload_images/11158618-2d98d03b5fdc7dec.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-FXEG93t9-1565273314249)(https://upload-images.jianshu.io/upload_images/11158618-d910c75eb9eeffa2.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-MB61hRDb-1565273314250)(https://upload-images.jianshu.io/upload_images/11158618-e7f0b2791a89ee82.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

登录权限

store

index.js

state.js

mutations.js

// index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
 state,
 mutations
})

export default store

main.js

import Vue from "vue"
import App from "./App.vue"
import Vuex from "vuex"
import router from "./router"
import store from "./store"

Vue.config.productionTip = false

Vue.use(Vuex)

state.js

export default {
 userInfo: ""
}

main.js

Vue.prototype.$store = store
router.beforeEach((to, next) => {
 console.log(store.state, "store.state")
 if (store.state.userInfo || to.path('./login')) {
  next()
 } else {
  next({
    path: "/login"
  })
 }
})

state.js

export default {
 userInfo: "",
 userStatus: "",
 vipLevel: ""
}

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

[外链图片转存失败(img-6kX9wjR2-1565273314252)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]