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

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

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

　　比如:商品的收藏，

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

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

使用步骤：

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

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

三，store--index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import Vue from 'vue'   import Vuex from 'vuex'   //安装插件   Vue.use(Vuex)   //创建对象   const store  = new Vuex.stroe({<br>// 数据 　　state: {<br>　　　　counter: 1000<br>　　}, })   //导出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工具监听管理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import Vue from 'vue'   import Vuex from 'vuex'   //安装插件   Vue.use(Vuex)   //创建对象   const store  = new Vuex.stroe({ // 数据 　　state: { 　　　　counter: 1000 　　},<br>　　mutations: {<br>　　　　//定义方法--编写需求---来对应修改数据<br>　　　　increment(state){<br>　　　　　　state.conter++<br>　　　　},<br>　　　　decrement(state){<br>　　　　　　state.conter--<br>　　　　}<br>　　}, })   //导出store对象   export default store

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

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

js---

export default {

.....

methods: {

　　add(){

　　　　this.$store.commit('increment')

　　}

}

}