基于vue脚手架2.6版本的vuex v3.6.2插件库使用安装
作者：互联网
一、概念
状态数据管理器是用于管理全局状态数据、实现数据流控制、实现数据跨组件传递的一个数据管理库
它是使用闭包来实现避免全局数据污染，使用单向数据流来实现数据流控制。
1.安装：cnpm i -S vuex@3
2.它是一个全局唯一数据单向流的一个状态数据管理JS对象
状态数据：就是指页面虚拟dom状态的数据，可以是data数据，props，computed
3.为什么要用？需要全局数据单一，不被污染，数据流可控，数据可变化追溯。
在Vue上全局注入使用：Vue.use(Vuex)
4.实例化：new Vuex.Store():实例化一个可以用于存储数据和提供操作数据的一个存储对象（Store）
在这个对象下又模块化属性：modules接收一个对象。有模块就有开启命名空间属性来进行对模块文件划分
namespaced:true (一旦这个命名空间开启后 ，就所有的getter、mutation、action等内置方法名字就都必须加上 模块名字+'/')
=>getters.getAmount =>getters['cart/getAmount']
模块核心四大属性：
1)state定义和初始化数据的属性（这里放数据源或者初始化定义的数据）
2）getters:是定义外部获取state中的数据的getter方法的属性
注意点：所有的getter方法会有一个state形参，而且这个函数可以返回state数据
3）actions：是定义执行数据处理的异步方法的函数
注意点：它有两个形参：第一个是store实例对象 - -因为要调用commit方法提交处理好的数据到mutation方法
第二个参数：是dispatch发送过来的参数
4）mutaitions:定义扭转数据的方法的属性
注意点：第一个为state对象，第二个为commit方法传递的参数对象
//定义数据管理器的state、getters、mutations、actions、的modules（模块配置）
//进行vuex插件注册
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//引入模块
import common from './common'
//实例化 - - 因为是模块化管理，所以每一个模块应该是一个独立的模块（每一个模块应该是一个文件）
const store = new Vuex.Store({
modules:{
common,
})
export default store
//导出该管理器文件后需要在渲染到vue全局上来使用
这里是配置模块文件，可以将模块文件分开进行配置，直接修改数据管理文件操作就可以（然后进行导出引入对象文件）
//定义common模块，进行导出到管理器
//action定义也可以单独写对象声明来使用，单独写出来是为方便进行操作
const actions={
//把处理后的数据提交到mutation中去进行数据更新，接收数据，所以就有两个形参
tokenAct(_store,_data){
Promise.resolve().then(()=>{
//为什么这里不需要加模块名字
_store.commit('setToken','TOKEN - '+ _data)
//第一个参数是提交到扭转下的方法 所以不是模块名
})
}
}
//这里导出时没有声明因为花括号在js里是属于空对象定义
export default {
//开启命名空间
namespaced:true,
//四大核心属性配置
//state是公共数据源，共享和存储的地方
state:{
//通用票据 -- 是用来解决http无状态使用的一个凭证 常见于（登录的token的存储）
},
getters:{
//getter方法要获取到state的值，才能返回state值，所以方法必须有一个 state形参
getToken(_state){
return _state.token
}
},
actions,
mutations:{
//给state数据赋值，就需要接收数据，那么就需要连个形参
setToken(_state,_token){
_state.token = _token
}
}
}
//在形参后面就是跟着state对象下的属性然后赋值改变，获取
//定义common模块，进行导出到管理器
//action定义也可以单独写对象声明来使用，单独写出来是为方便进行操作
const actions={
//把处理后的数据提交到mutation中去进行数据更新，接收数据，所以就有两个形参
tokenAct(_store,_data){
Promise.resolve().then(()=>{
//为什么这里不需要加模块名字
_store.commit('setToken','TOKEN - '+ _data)
//第一个参数是提交到扭转下的方法 所以不是模块名
})
}
}
//这里导出时没有声明因为花括号在js里是属于空对象定义
export default {
//开启命名空间
namespaced:true,
//四大核心属性配置
//state是公共数据源，共享和存储的地方
state:{
//通用票据 -- 是用来解决http无状态使用的一个凭证 常见于（登录的token的存储）
},
getters:{
//getter方法要获取到state的值，才能返回state值，所以方法必须有一个 state形参
getToken(_state){
return _state.token
}
},
actions,
mutations:{
//给state数据赋值，就需要接收数据，那么就需要连个形参
setToken(_state,_token){
_state.token = _token
}
}
}
//在形参后面就是跟着state对象下的属性然后赋值改变，获取
二、全局注入：store:Store实例对象（在全局上使用$store对象后面跟模块方法名）
1.getters属性：获取数据的getter方法 ：
好处“常常使用computed来接收数据，可以实时获取state中的最新数据
2.commit方法：提交到mutation中去更新数据：第一个参数是mutation方法名字，第二个参数是需要传递的数据对象
3.dispatch方法：调用action的方法：第一个参数action名字，第二个参数需要传递的数据对象
！！！这里插一段页面调用的$store方法代码使用
//全局使用数据状态管理器对象
<template>
<div>
<h3>状态数据测试</h3>
<p>created里获取的值 ：{{value}}</p>
<p>computed获取到的值：{{token}}</p>
<p>
<button @click="changeToken">更新按钮</button>
<button @click="asyncChangeToken">异步更新按钮</button>
</p>
<hr>
<button @click="logoutEvt">退出</button>
</div>
</template>
<script>
export default{
data(){
return {
value:''
}
},
created(){
this.value =this.$store.getters['common/getToken']
},
computed:{
token(){
return this.$store.getters['common/getToken']
}
},
methods:{
logoutEvt(){
//清除路由拦截标识，然后再退出到登录界面
sessionStorage.clear()//这个是全部清除，单个清除需要用到removeItem('key')
this.$router.push('/login')
},
changeToken(){
//直接调用commit方法
this.$store.commit('commont/setToken',Math.random())
},
asyncChangeToken(){
//调用异步action方法然后再异步操作提交到mutation扭转数据方法来更新
this.$store.dispatch('common/tokenAct',Math,random())
}
}
}
</script>
this.$route:打印注册激活路由的信息对象，每个对象是局部的，有获取到当前·路由·是·path,name,params,query等属性使用
$route.matched是数组，包含当前路由所有嵌套记录，包含自己信息和children数据：就是routes配置中的对象数组
this.$router:可以打印全局的router的实例，也是经常用到的跳转页面路由功能。包含很多属性及history对象，任何页面调用方法，
push（'home' || {path:'home'}） =>写法字符串路径或则地址对象
,replace, 跳转指定url路径，会在history不加记录，点击返回转到上上页面，上面是上一个页面
go(n) =>跳转正负整数
原理和redux是一样的：
vuex有四个属性值：state,getters,mutations,actions
在没有actions情况下，
数据state-->data
获取数据：getters-->computed
更改数据：mutations->methods
三、原理：Vuex采用MVC模式中的Model层，规定所有数据必须通过action --> mutations -->state 这个流程来进行改变状态
再结合Vue的数据视图双休绑定实现页面的更新
这样做法：是为统一页面状态管理，可以让复杂的组件交互变的简单清晰。
关于页面数据会丢失问题？（一般是全局唯一单向数据使用 =>token 或者菜单）
会丢失（解决使用vuex数据持久存储vuex-persistedstate） 可以在Vuex.Store实例加一个vuex针对模块进行数据持久化库插件
//实例化 -- 因为是模块化管理，每个模块应该是一个独立的模块（每个模块也就是一个文件）
const store =new Vuex.Store({
//添加vuex数据持久化库插件
plugins:[
//注册插件
//我们的数据都是用户登录以后才会有的数据，应该为一个会话数据，所以应该存在sessionStorage中
persistedState({
//默认存储在localStorage中，项目框架指定存在sessionStorage
storage:window.sessionStorage
})
],
//模块配置 modules:{}
})
标签：插件,vue,v3.6,对象,token,state,模块,数据,store 来源： https://www.cnblogs.com/cc-font/p/15903104.html