码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-10-04 23:05:20      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:r++   变量   组件   cli   触发事件   rem   应用   地理   之间   

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‘)

  }

}

}

 

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

标签:r++   变量   组件   cli   触发事件   rem   应用   地理   之间   

原文地址:https://www.cnblogs.com/fdxjava/p/11623348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!