526互联

Vue学习七：自定义创建项目和vuex

发布时间 2023-09-18 17:35:32作者: 数星观月

一、自定义创建项目

默认的项目有很多包不全，需要的时候还要导包搭架子，因此我们可以自定义创建项目。

选择的项目按照自己需要的设置，可参考如下参数设置。（eslink是一种代码规范）

二、vuex

1、vuex概述
vuex是一个vue的状态管理工具，状态就是数据。
大白话: vuex 是一个插件，可以帮我们管理vue通用的数据(多组件共享的数据)例如: 购物车数据个人信息数据
2、场景:
①某个状态在很多个组件来使用(个人信息)
②多个组件共同维护一份数据(购物车)

创建一个空仓库

导入vuex模块，可以在创建项目的时候直接勾选，也可以输入命令导包，指令如下。（记得版本口诀233，344，这里使用的是vue2导vuex3的包）

npm install vuex@3 --save

新建vuex模块文件，在src下新建

创建仓库，在index.js中写，空仓库模板如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    
})
export default store

在main.js中导入挂载

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
Vue.config.productionTip = false

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

看是否创建成功的话，在一个组件中使用created钩子函数在里面打印一下仓库（console.log(this.$store)），看时候能打印出。

往仓库里面加数据并在组件中访问仓库中的数据

1.提供数据:
State提供唯一的公共数据源，所有共享的数据都要统一放到 Store中的State中存储。在state对象中可以添加我们要共享的数据。

2.使用数据:
①通过store直接访问

模块中：{{$store.state.xxx}}
组件逻辑中：this.$store.state.xxx
JS模块中store.state.xxx

②通过辅助函数

核心概念- mutations
目标:明确vuex同样遵循单向数据流，组件中不能直接修改仓库的数据
通过strict: true可以开启严格模式

目标:掌握mutations的操作流程，来修改state数据。(state数据的修改只能通过 mutations )
1.定义mutations对象，对象中存放修改state的方法

const store = new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        //第一个参数是当前的store的state属性
        addCount(state){
            state.count += n
        }
    }
})

2.组件中提交调用mutations

methods:{
    handleAdd(){
        this.$store.commit('addCount')
    }
}

核心概念- actions
目标:明确actions的基本语法，处理异步操作。
说明: mutations 必须是同步的(便于监测数据变化,记录调试)

1、提供action方法

actions:{
    setAsyncCount(context,num){
        setTimeout(() => {
            context.commit('addCount',num)
        },100)
    }
}

2、页面中dispatch调用

this.$store.dispatch('setAsyncCount',n)