首页 > 其他分享> 文章详细

基于vue脚手架2.6版本的vuex v3.6.2插件库使用安装

2022-02-18 17:00:30 阅读：381 来源： 互联网

标签：插件 vue v3.6 对象 token state 模块数据 store

一、概念

状态数据管理器是用于管理全局状态数据、实现数据流控制、实现数据跨组件传递的一个数据管理库

它是使用闭包来实现避免全局数据污染，使用单向数据流来实现数据流控制。

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

基于vue脚手架2.6版本的vuex v3.6.2插件库使用安装