大家好，又见面了，我是你们的朋友全栈君。
安装与引入
转自:思否
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'
})
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/129644.html原文链接：https://javaforall.net
