保姆级前端vue插件vuex详解

保姆级前端vue插件vuex详解

编辑器准备vscode webstorm 新手推荐vscode

项目准备

创建项目教程地址

如果在上链接教程中你使用的是自定义创建项目方法空格表示选择安装哪个

自定义安装

使用命令vue create 项目名

下面这里我没有选择css Pre-processors这个是css的预处理器如果选择了一会就会显示下面的下面这个页面

如果学习过可以使用空格勾选上建议学习scss和less

根据自己的技术想用vue几建议学习vue3

这个简单来说就是路径有没有#选哪个都行

这里我们选择y

语法校验

是否保存配置

以下不是自定义配置的使用vuex的方法

博主使用的是vscode编辑器教程以vscode为主

如果使用的命令行工具创建的项目，将项目导入编辑器

博主直接在vscode终端创建的项目

输入vue create 项目名

npm run serve运行项目

右键创建好的项目名在终端打开

输入npm i vuex@3

如果不指定版本号则默认安装最新的vuex可能安装的用不了

安装成功之后在src目录下创建store文件夹新建index.js

写入以下内容

//导入vuex

import Vuex from ‘vuex’
import Vue from ‘vue’

Vue.use(Vuex)

const store = new Vuex.Store({

})export default store

state

也可以引入json数据

获取数据使用 this. $ store.state.属性名字
{{$store.state.数据名字}}

文件中引入 import {mapState,mapMutations,mapGetters, mapActions } from ‘vuex’;

也可以使用扩展运算符mapState写到methods里…mapState([‘name’]),用{{name()}}来获取

mapState写到computed属性里…mapState([‘name’]),用{{name}}来获取

mutations

mutations:{修改state里面的数据}定义好方法

页面使用按钮触发addx方法修改state的数据

使用this.$store.commit(‘方法名’,传递的参数)

使用mapMutations写到methods里面 …mapMutations([‘add’])

页面中使用触发方法@click=“add(参数相当于上面的this.name)”

action

action处理异步

首先安装axios npm i axios

引入import axios from ‘axios’;

初始化数据

state:{

list:‘xxxx’

}

在action中使用async await

定义方法

actions:{
async   getData(context,payload){

payload就是触发方法传递的值

const res =await axios.get('地址')例如http://test.zjie.wang/tab

context.commit('mutations里面的方法',请求到的数据res (res.data.list)

}
}

mutations:{

updateList(state,payload){

state.list=payload

}

}

在页面中使用getData的异步方法

this.$store.dispatch(‘queryData’,‘这个参数就是传递的值payload’)根据需要自行切换

这是使用mapActions映射和mapMutations的方法一样

getters就是相当于计算属性

getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getters: {
​ sum(state) {
​ return state.count+1;
​ }
}

页面中使用，和前面的mapState一样

…mapGetters([‘sum’])

module

如果模块较为复杂的话需要用到

首先在store文件夹下新建modules文件夹新建名字随意这里就先叫做common吧

写入以下内容内容可以随意更改

// state
const state = {
	token: '小猪佩奇',
	count: 1,
}
// mutations
const mutations = {
	add(state, value) {
		state.count += value
	},
	updateList(state, payload) {
		state.list = payload
	}
}
// getters
const getters = {
	sum(state) {
		return state.count++;
	}
}
// actions
const actions = {
	async queryData(context, payload) {
		console.log(context + '---', payload)
		// 调用接口获取数据
		const ret = await axios.get('http://test.zjie.wang/tab')
		// 必须触发mutation修改list的值
		// context类似于this.$store
		context.commit('updateList', ret.data.list + payload)
	}
}

export default {
	//命名空间
	namespaced: true,
	state,
	getters,
	actions,
	mutations
}

在index.js文件里引入common文件

将common写入modules中

modules:{
common
}

使用里面的数据和方法和上面介绍的一样无非就是多嵌套了一层

例如

使用模块里面的token:小猪佩琪 其他模块都一样

页面中引入 import { mapState, mapMutations, mapGetters, mapActions } from ‘vuex’;

直接读取{{ KaTeX parse error: Expected 'EOF', got '}' at position 25: …te.common.token}̲} this.store.state.common.token

在computed属性中写入直接{{token}}读取

…mapState(‘common’, [‘token’]),// 映射为 this.$store.state.common.token

// 方式2

// token() {

// return this.$store.state.common.count

// }

使用vuex-persistedstate状态持久化,解决刷新数据消失的问题

npm i vuex-persistedstate

在store下的index.js中

import createPersistedState from "vuex-persistedstate"

 const store = new Vuex.Store({
        // ...
         plugins: [createPersistedState()]
      })
     默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage
 })]
})

// 想使用cookie同理

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(val) {
   return {
   // 只储存state中的assessmentData
   assessmentData: val.assessmentData
  }
  }
 })]
// vuex引用多个插件的写法

到这为止吧~~