Vue--vuex状态管理-多界面状态管理$store.state.变量名称 ---数据通触发事件改变this.$store.commit

Posted 2022-12-23 fdxjava

1.作用需求：多个状态，在多个界面的共享问题

　　比如：用户的登录状态，用户名称，头像，地理位置信息等等

　　比如:商品的收藏，

这些状态信息，我们都可以放在同一的地方，对他进行保存和管理，而且他们还是响应式的。

2.不同于父子组件之间的传递，应用于没有直接的关系。

使用步骤：

一，Vuex是一个插件  下载: npm install vuex --save

二，创建一个文件夹store,仓库的意思，或者叫vuex,不建议直接在main.js文件中引入。就像router路由一样，这样会使main文件越来越大。

三，store--index.js

import Vue from ‘vue‘

import Vuex from ‘vuex‘

//安装插件

Vue.use(Vuex)

//创建对象

const store  = new Vuex.stroe(
// 数据
　　state: 
　　　　counter: 1000
　　,
)

//导出store对象

export default store

　　

四，main.js 

挂载一下-挂载之后，每个页面都可以引用$store

import store from ‘./store‘

new Vue(

el: ‘#app‘,

stroe,

)

其他页面引用会    <h2> $store.state.counter </h2>

　　事件属性引用<button @click=" $store.state.counter++ ">  标签内不建议这么使用--响应式的意思-这个值所有页面都会跟着改变。

　　官方建议：store--index.js---方便devtools工具监听管理

import Vue from ‘vue‘

import Vuex from ‘vuex‘

//安装插件

Vue.use(Vuex)

//创建对象

const store  = new Vuex.stroe(
// 数据
　　state: 
　　　　counter: 1000
　　,
　　mutations: 
　　　　//定义方法--编写需求---来对应修改数据
　　　　increment(state)
　　　　　　state.conter++
　　　　,
　　　　decrement(state)
　　　　　　state.conter--
　　　　
　　,
)

//导出store对象

export default store　　

其他页面引用调用----出发事件，在方法中引用 this.$store.commit(‘事件名称‘)

<button @click=" add "> +</button>

js---

export default

.....

methods:

　　add()

　　　　this.$store.commit(‘increment‘)