安装与引入

转自:思否

Vue-cli 搭建成功后

npm install vuex

进入项目安装vuex,安装完成后，在项目的文件夹src中再新建一个文件夹store,文件夹中新建文件store.js(命名随意)。

store.js

//引入vue和Vuex

import Vue from ‘vue’

import Vuex from ‘vuex’

//引入之后，对vuex进行引用

Vue.use(Vuex)

main.js

import {store} from ‘./store/store’

new Vue({

store:store,//使用store

el: ‘#app’,

router,

components: { App },

template: ‘<App/>’,

})

在main.js 中引入vuex文件

引入结束

state

转自:CSDN

在组件中请用computed去接收state,如下

computed:{

    count(){

      return this.$store.state.count //用computed接收

    }

}

mapState

为什么使用mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

首先在要使用的组件中引入mapState

import { mapState } from ‘vuex’

使用

computed: mapState({
    count: 'count', // 第一种写法
    sex: (state) => state.sex, // 第二种写法
    from: function (state) { // 用普通函数this指向vue实例,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 这里不需要state,测试一下computed的原有用法
      return '测试' + this.str
    }
  }),

…mapState …对象展开符的扩展

computed:{
    //原来的继续保留
    fn1(){ return ...},
    fn2(){ return ...},
    fn3(){ return ...}
    ......
    //再维护vuex
    ...mapState({  //这里的...不是省略号了,是对象扩展符
        count:'count'
    })
}

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/129644.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...