web前端开发之Vuex基础

Vuex基础

一、Vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

每一个 Vuex 应用的核心就是 store（仓库）

• “store”基本上就是一个容器。
• 它包含着应用中大部分的状态 (state)
• Mutations 存放的是改变state的方法
• Actions 存放的是一些业务逻辑，通常为异步任务

Vuex 和单纯的全局对象有以下两点不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

二、如何使用Vuex

2.1安装

在创建vue脚手架项目时 如果没有安装Vuex 则需要单独安装

npm install vuex

2.2 新建store文件

在src路径下新建store文件夹 并在中新建index.js

index.js文件进行初始化(仅需要提供一个初始 state 对象和一些 mutation)

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

Vue.use(Vuex)

const store = new Vuex.Store({
  //vuex 中的状态
  state: {

  },
  // vuex 中改变状态的方法
  mutations: {
      
  }
})
export default store

2.3 引入

为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供 了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

修改main.js

import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from './store'

Vue.config.productionTip = false

new Vue({
  //挂载到当前实例
  store,
  render: h => h(App)
}).$mount('#app')

三、父子传值问题

3.1 App.js

<template>
  <div id="app">
    <my-cut :count="count"></my-cut>
  </div>
</template>

3.2 index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(){
            this.state.count++
        },
    }
})
export default store

3.3 Add.vue

    <div class="add">
        // 因为store已经挂载到vue实例中
		// 所以可以通过$store下边的state下边的count获取数据
        <p>当前count变量的值是:{{$store.state.count}}</p>
        <button @click="add">+1</button>
    </div>
</template>
<script>
export default {
    methods:{
        add(){
            //不能直接修改state状态中的值
            // 需要使用commit提交修改
            this.$store.commit('add')
        }
    }
}
</script>

四、核心概念

4.1 states

单一状态树 每个应用中只能包含一个store实例

• vuex 中的 state 相当于组件中的 data
• State中的数据与组件 data 中的数据一样，也是响应式的

const store = new Vuex.Store({
    state:{
        count:10,
        name:'onlifes'
    }
})

4.1.1 计算属性(辅助函数)

<template>
  <div class="item">
    <p>{{ names }}</p>
    <p>{{ prices }}</p>
  </div>
</template>
<script>
export default {
  // 计算属性
  computed: {
    names() {
      return this.$store.state.name;
    },
    prices() {
      return this.$store.state.price;
    },
  },
};
</script>

每次都要定义一个函数 很麻烦，于是：

辅助函数mapState

//通过辅助函数mapState简化计算属性
    computed:mapState({
        names(state){
            return state.name
        }
        //可简写成
         names :state => state.name
        //在简写
        // 属性名(想要使用的计算名称)：值(使用的store中的属性名称)
        names:'name'
    })

        // 如果你的计算属性名称与值相同
        computed:mapState(['name','price'])

4.1.2 展开运算符

    computed:{
        ...mapState(['name','price'])
    }

那为什么要脱裤子放P 多此一举呢

    computed:{
        // 组件拥有的计算属性
        address:function(){
            return '背景'
        },
        // store拥有的计算属性
        ...mapState(['name','price'])
    }

4.2 getters获取器

• Getter用于对Store中的数据进行加工处理形成新的数据
• 它只会包装Store中保存的数据，并不会修改Store中保存的数据
• 当Store中的数据发生变化时，Getter 生成的内容也会随之变化

简单使用

index.js

getters:{
        count:function(state){
            return state.list.length
        }
    	//可简写成
        count:state => state.list.length
    }

item.vue

<p>列表中一共有{{$store.getters.count}}条数据</p>

我们可以看到获取的时候代码很长 此时我们可以使用计算属性mapGetters

import {mapGetters} from 'vuex'

4.2.1 用法

computed:{
        ...mapGetters(['count'])
}

4.3 mutation

mutations作用就是让组件可以通过mutations改变state中的值

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation 比如想给 todos 中增加一个新的事项，不能直接修改，只能通过 mutation 才可以

4.3.1 基本使用

index.js

// mutations作用就是让组件可以通过mutations改变state中的值
    mutations:{
        addList(state,newList){
            state.list.push(newList)
        }
    }

App,vue

//引入辅助函数
import { mapMutations } from "vuex";

 methods: {
     // 展开
    ...mapMutations(['addList']),
    // 触发add事件
    add(){
        const newList = { id: this.count+1, title: "我没时间了啊", author: "张三" }
        // 调用mutations中的方法
        this.addList(newList)
    }

  },

<button @click="add">新增列表</button>