一小时带你理解Vuex

NoProblemLi

于 2020-12-08 20:38:14 发布

阅读量102

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ljx1129071273/article/details/110881650

版权

八、Vuex

在这里插入图片描述

是一个专门为Vue.js应用程序做开发的状态管理模式,采用的是集中式管理所有组件的状态,并以一种相应的规则状态以一种可预测的方式发生改变,Vuex集成到Vue的官方调试工具devtools extension,提供了注入零配置的time travle的调试,通俗的说就是将其看成需要多个组件共享的变量全部存储在一个对象里面

npm install vuex --save

安装vuejs.devtoos插件

里面每一个方法的作用

1.state – 存放状态

2.getters – state的计算属性   主要用于查看值

3.mutations – 更改状态的逻辑，同步操作   主要用于修改值

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化

进行统一管理创建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 2.创建对象
const state = {
  counter: 1000,
  students: [
    {id: 110, name: 'why', age: 18},
    {id: 111, name: 'kobe', age: 24},
    {id: 112, name: 'james', age: 30},
    {id: 113, name: 'curry', age: 10}
  ],
  info: {
    name: 'kobe',
    age: 40,
    height: 1.98
  }
}
const store = new Vuex.Store({
  state,
  mutations:{
    //方法
    increment(state){
      this.state.counter++;
    },
    decrement(state){
      this.state.counter++;
    }
  },
  actions:{},
  getters:{},
  modules: {
  }
})
// 3.导出store独享
export default store

在App.vue里面对里面的数据进行获取,所有对数据的管理都应该放在index,js里面

<template>
  <div id="app">
    <span>{{ message }}</span>
    <br />
    <span>{{ $store.state.counter }}</span>
    <br />
    <button @click="addNum">+</button>
    <button @click="delNum">-</button>
    <!-- <HelloVuex :count1="count"></HelloVuex> -->
    <HelloVuex></HelloVuex>
  </div>
</template>
<script>
import HelloVuex from './components/HelloVues.vue';
export default {
  name: "App",
  data() {
    return {
      message: "李加喜",
    };
  },
  methods: {
    addNum(){
      this.$store.commit('increment')
    },
    delNum(){
      this.$store.commit('decrement')
    }
  },
  components: {
    HelloVuex
  },
};
</script>
<style></style>

state单一状态树

实现对整体变量的统一使用

在store/index.js里面

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 2.创建对象
const state = {
  counter: 1000,
  students: [
    {id: 110, name: 'why', age: 18},
    {id: 111, name: 'kobe', age: 24},
    {id: 112, name: 'james', age: 30},
    {id: 113, name: 'curry', age: 10}
  ],
  info: {
    name: 'kobe',
    age: 40,
    height: 1.98
  }
}
const store = new Vuex.Store({
  state,
  mutations:{
    //方法
    increment(state){
      this.state.counter++;
    },
    decrement(state){
      this.state.counter++;
    }
  },
  actions:{},
  getters:{
    PowerNum(state){
      return state.counter*state.counter;
    },
    dayu20(state){
      return state.students.filter(s=>s.age>20)
    },
    more20stuLength(state, getters) {
      return getters.dayu20.length
    },
    moreAgeStu(state){
      return age=>{
        return state.students.filter(s=>s.age>age)
      }
    }
  },
  modules: {
  
  }
})
// 3.导出store独享
export default store

在App.vue里面

<template>
  <div id="app">
    <span>{{ message }}</span>
    <br />
    <span>{{ $store.state.counter }}</span>
    <span>{{$store.getters.PowerNum}}</span>
    <br />
    <button @click="addNum">+</button>
    <button @click="delNum">-</button><br>
    <span>{{$store.getters.dayu20}}</span><br>
    <span>{{$store.getters.more20stuLength}}</span>
    <span>{{$store.getters.moreAgeStu(12)}}</span>
    <!-- <HelloVuex :count1="count"></HelloVuex> -->
    <HelloVuex></HelloVuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVues.vue';
export default {
  name: "App",
  data() {
    return {
      message: "李加喜",
    };
  },
  computed: {
    // dayu20(){
    //   return this.$store.state.students.filter(s=>{
    //     return s.age>=20
    //   })
    // }
  },
  methods: {
    addNum(){
      this.$store.commit('increment')
    },
    delNum(){
      this.$store.commit('decrement')
    }
  },
  components: {
    HelloVuex
  },
};
</script>

<style></style>

一般根全局作用有关的都需要在main.js里面进行注册,例如router store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
如果没有提前安装router  需要进行vue iinstall --save vue-router

也可以使用type的方式进行提交

8.1 Type方式提交

在mutations里面

addCrementCount2(state,payload){
      state.counter+=payload.count;
    }

在App.vue

addCount2(count){
      this.$store.commit({
        type: 'addCrementCount2',
        count
      })

根据官方的要求,要求设置的是常量

在store文件夹下面创建一个文件mutation-type.js

export const INCREMENT='increment'
...后面还有类似

在index.js里面

首先先进行引入

import {
  INCREMENT,DEVREMENT
} from './store/mutation-type'

[INCREMENT](state){
      this.state.counter++;
    },

在App.vue里面

addNum(){
      this.$store.commit(INCREMENT)
    },

8.2 vue-action

使用action实现异步请求

在index.js里面

actions:{
    updateAction(context,pload){
      // setTimeout(()=>{
      //   context.commit('updateName');
      // },1000)
      return new Promise((resolve,reject)=>{
        console.log(pload);
        context.commit('updateName');
        resolve('123');
      },1000)
    }
  },

在App.vue里面

updateNames(){
      //this.$store.commit('updateName')
      this.$store.dispatch('updateAction','我是携带的信息')
      .then(res=>{
        console.log('里面完成了提交');
        console.log(res);
      })
    }

8.3 Model

ModelA.js

export default {
  state: {
    name: 'zhangsan'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + '11111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      }, 1000)
    }
  }
}

在index.js里面

import moduleA from './modules/moduleA'
modules: {
    a: moduleA
  }

在App.vue里面

	<h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">修改名字</button>
    <h2>{{$store.getters.fullname}}</h2>  //尽可能父模块与子模块的方法名字不一致
    <h2>{{$store.getters.fullname2}}</h2>
    <h2>{{$store.getters.fullname3}}</h2>
    <button @click="asyncUpdateName">异步修改名字</button>

封装将这些方法放入到一些单独的文件里面

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const state = {
  counter: 1000,
  students: [
    {id: 110, name: 'why', age: 18},
    {id: 111, name: 'kobe', age: 24},
    {id: 112, name: 'james', age: 30},
    {id: 113, name: 'curry', age: 10}
  ],
  info: {
    name: 'kobe',
    age: 40,
    height: 1.98
  }
}
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,

  modules: {
    a: moduleA
  }
})

// 3.导出store独享
export default store

然后将需要引入的放入到指定的文件里面