Vue(小码哥王洪元)笔记09vuex，单界面的状态管理，mutation，vuex的核心概念，单一状态树，getters,mutation,module的使用 - Go语言中文社区

Vue(小码哥王洪元)笔记09vuex，单界面的状态管理，mutation，vuex的核心概念，单一状态树，getters,mutation,module的使用

1、什么是xuex

官方解释：
vuex是一个专门为vue.js开发的状态管理模式
vuex也集成到vue的官方调试工具devtools extiension，提供了诸如零配置的time-travel调试，状态快照导入导出等高级调试功能

状态管理到底是什么？
状态管理模式，集中式存储管理等，可以简单地将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后将这个对象放在顶层的vue实例中，让其他组件可以使用。

可以把状态管理看做是一个公共变量的管理。这个公共变量是事实可更新的。有点类似于vue实例里面的data这里可实时（响应式）更新的

管理什么状态呢？（使用场景）
软件中如果有多个状态，在多个界面间需要共享数据
如用户的登录状态、用户名称、头像、地理位置信息等（如商城里面商品的收藏，购物车中的物品等。）这些状态信息，都可以放在统一的地方，对他进行保存和管理，并且这些信息还都是响应式的

临时插入点思考：

- 1、其实不论是xx.vue组件还是xx.js脚本都在做一件事，就是往外导出export模块，这些导出的模块最终全部要被主入口脚本main.js导入（import）并挂载

- 2、在main.js中导入（注册）的这些模块（路由router，仓库store）又能被各页面通过$router, $stored等魔术变量所拿到，然后把这些模块所包含的data，computed，components，methods等所使用

- 3、main.js作为主入口的脚本，最终也要挂载到首页（el:’#App’）,因为vue是一个单页面富应用的东西

2、单界面的状态管理

原理图
从view视图中产生一个actions（如实践），改变状态（如数据改变），状态的改变直接影响view的呈现
在这里插入图片描述

  • 1、安装vuex

项目目录下安装，cmd命令

npm install vuex --save
  • 2、在路由中创建新的路由并use这个插件
    创建一个新的文件夹store，并在store里创建myindx.js（默认访问的话可以创建index.js）
    在myindex.js文件中创建store对象
import Vue from 'vue'
import Vuex from 'vuex'

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

//2、创建vuex对象
const store = new Vuex.Store({
  //在store里面放置的对象
  //状态
  state: {
    counter:1000//数据实际存放在这个state对象的counter里
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

//3、导出store对象
export default store;
  • 3、在main.js里注册store对象
    只有在main里面注册了，才能个在各个页面中拿到这个对象
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/myindex'//如果不指定具体文件名则默认导入store目录下的

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//在main里面注册了，才能个在各个页面中拿到这个
  render: h => h(App)
})
  • 4、创建一个HelloVuex.vue组件
    HelloVuex.vue和App.vue组件都要拿到刚才store对象里state中的counter
    调用公共变量使用$store.state.counter

HelloVuex.vue

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
  </div>
</template>
<script>
export default {
  name:'HelloVuex',
 
}
</script>
<style scoped>

</style>

App.vue
调用公共变量使用$store.state.counter

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 >{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex ></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  data(){
    return{
      message:'我是app组件',
      counter:0
    }
  },
  components:{
    HelloVuex
  },
  methods:{
    addCounter(){

    },
    jianCounter(){

    },
  }
}
</script>

<style>

</style>

3、通过mutation管理状态（state）

在store模块中会 有一个mutations对象，在里面可以放置一些修改state对象内容的方法，这些方法都会包含一个state的参数

以后只要是修改state的内容都必须通过mutation来进行管理（修改）

修改mutation的内容需要使用commit方法，commit带俩参数
在这里插入图片描述

  • 1、在上例基础上修改myindex.js

在store对象里添加mutations对象，并且添加两个方法，这两个方法修改state对象中的counter

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

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

//2、创建vuex对象
const store = new Vuex.Store({
  //在store里面放置的对象
  //状态
  state: {
    counter:1000
  },
  mutations: {
    //可以定义方法，方法会有一个默认的state参数
    increment() { 
      this.state.counter++
    },
    decrement() { 
      this.state.counter--
    }

  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

//3、导出store对象
export default store;
  • 2、在上例基础上修改app.vue
    在methods里填写事件回调函数的代码
  methods:{
    addCounter(){
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }

完整app.vue如下

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 >{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex ></hello-vuex>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  data(){
    return{
      message:'我是app组件',
      counter:0
    }
  },
  components:{
    HelloVuex
  },
  methods:{
    addCounter(){
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }
}
</script>

<style>

</style>

4、vuex的核心概念

State：状态。对应store仓库。了解单一状态树
Getters：读state里的数据（计算之后读取，当然也可以原封不动地读）
Mutations：
Action：异步状态的mutations
Module：

getters可以看做vue实例的compute属性，
mutations可以看做是vue实例的methods属性

5、单一状态树

单一状态树：Single Source of Truth，也可以翻译成单一数据源
其核心思想就是不要让数据分布在各个仓库（store）里，而是只用一个store来存储

6、Getters基本使用

  • 1、myindx.js中创建getters里面的数据修改方法

myindx.js

getters: {
    //这里也有一个默认的state参数
    powerCount(state) { 
      return state.counter*state.counter
    }
  },

完整代码

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

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

//2、创建vuex对象


const store = new Vuex.Store({
  //在store里面放置的对象
  //状态
  state: {
    counter:1000
  },
  mutations: {
    //可以定义方法，方法会有一个默认的state参数
    increment() { 
      this.state.counter++
    },
    decrement() { 
      this.state.counter--
    }

  },
  actions: {

  },
  getters: {
    //这里也有一个默认的state参数
    powerCount(state) { 
      return state.counter*state.counter
    }
  },
  modules: {

  }
})

//3、导出store对象
export default store;

2、app中是使用getters

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 >{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex></hello-vuex>
    <h2 >App内容：演示getters相关信息</h2>
    <h2>{{$store.getters.powerCount}}</h2>
  </div>
</template>

完整代码

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 >{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex></hello-vuex>
    <h2 >App内容：演示getters相关信息</h2>
    <h2>{{$store.getters.powerCount}}</h2>
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  data(){
    return{
      message:'我是app组件',
      counter:0
    }
  },
  components:{
    HelloVuex
  },
  methods:{
    addCounter(){
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }
}
</script>

<style>

</style>

案例2，在以上基础上
myindex.js

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

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

//2、创建vuex对象
const store = new Vuex.Store({
  //在store里面放置的对象
  //状态
  state: {
    counter: 1000,
    students: [
      { id: 110, name: 'zhangsan', age: 34 },
      { id: 111, name: 'lisi', age: 14 },
      { id: 112, name: 'wangwer', age: 13 },
      { id: 113, name: 'dingyi', age: 14 },
      { id: 114, name: 'masan', age: 25 },
      { id: 115, name: 'zhaoliu', age: 33 }
  
    ]
  },
  mutations: {
    //可以定义方法，方法会有一个默认的state参数
    increment() { 
      this.state.counter++
    },
    decrement() { 
      this.state.counter--
    }

  },
  actions: {

  },
  getters: {
    //这里也有一个默认的state参数
    powerCount(state) { 
      return state.counter*state.counter
    },
    //获取成年学生对象，可以将默认state参数写在参数列表里
    adultStudent(state){
      //使用fliter函数进行筛选
      return state.students.filter(s=>{
        //使用箭头函数进行遍历筛选
        return s.age>=18;
      });
    },
    //获取成年学生的数量
    adultStudentLength(state,getters) { //这里state看似没用上，但在调用adultStudent的时候用到了
      return getters.adultStudent.length;
    },
    //用参数把年龄传入进来
    moreAgeStu(state) {
      //返回一个函数，以方便再app.vue中去调用参数
      return function (age) { 
        return state.students.filter(s => s.age > age);
      }

    }

  },
  modules: {

  }
})

//3、导出store对象
export default store;

HelloVuex.js

<template>
  <div>
    <h4>{{$store.state.counter}}</h4>
    <h4>{{$store.getters.powerCount}}</h4>
    <h4>{{$store.getters.adultStudent}}</h4>
    <h4>{{$store.getters.adultStudentLength}}</h4>
    <h4>{{$store.getters.moreAgeStu(30)}}</h4>

  </div>
</template>
<script>
export default {
  name:'HelloVuex',
 
}
</script>
<style scoped>

</style>

App.vue

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2 >{{$store.state.counter}}</h2>
    <button @click="addCounter">+</button>
    <button @click="jianCounter">-</button>
    <hello-vuex></hello-vuex>
    <h4 >App内容：演示getters相关信息</h4>
    <h4>{{$store.getters.powerCount}}</h4>
    <h4>{{$store.getters.adultStudent}}</h4>
    <h4>{{$store.getters.adultStudentLength}}</h4>
    <h4>{{$store.getters.moreAgeStu(30)}}</h4>
    
  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex'

export default {
  name: 'App',
  data(){
    return{
      message:'我是app组件',
      counter:0
    }
  },
  computed:{
    
  },
  components:{
    HelloVuex
  },
  methods:{
    addCounter(){
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment');//increment
    },
    jianCounter(){
      //其实就是通过commit来提交一个函数，这个函数恰恰又是在修改state的内容
      this.$store.commit('decrement');

    },
  }
}
</script>

<style>

</style>

7、mutation状态更新

Vuex的store状态的更新唯一方式就是：提交mutation

  • 1、mutation主要包含两个部分

1、事件类型（type）
2、回调函数（hander），该回调函数的第一个参数就是state

  • 2、mutation的定义方式
mutations: {
    //可以定义方法，方法会有一个默认的state参数
    increment() { 
      this.state.counter++
    },
    decrement() { 
      this.state.counter--
    }

  },
  • 3、通过mutation更新（state）状态
methods:{
    addCounter(){
      //在这个方法中提交mutation，使用commit方法提交
      this.$store.commit('increment'
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_43745804/article/details/112755631
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！