vue vuex 挂载_Vuex 基本简单的使用

适用场景

1.全局共享数据，抛开繁琐的组件传值；

2.什么数据适合全局共享？(组件的共享数据)；

3.好处？(谁要用，直接获取，组件修改其他的也变化)；

4.数据管理集中化，全局管理方便；

如何在项目中使用vuex

1.下载

cnpm i vuex -S

2.导入，挂载vuex(main.js中)

//导入vuex

import Vuex from 'vuex'

//把vuex安装到vue中：

Vue.use(Vuex)

3.创建store对象

//创建一个store实例用来全局存储；

const store = newVuex.Store({

state: {

number:5,

}

})

4.将store挂载到vm上

//store挂载到vm上，才能在每个组建中通过this.$store.state.公共数据名称/*eslint-disable no-new*/

newVue({

el:'#app',

router,

render: h=>h(App),

store

})

this.$store.state.数据名称的调用

.vue组件调用：(第一种直接使用)

{{this.$store.state.number}}

.vue组件调用：(第二种导入辅助函数)

import {mapState} from 'vuex' //按需导入辅助函数和计算属性配合

//调用 mapState 函数和展开运算符

computed:{

...mapState(['number'])

}

页面直接使用

{{number}}

mutations:如果要修改state的数据需要在store中调用方法

全局定义使用：

const store = newVuex.Store({

state: {

chuanc:10,

},

mutations: {

add(state){

state.chuanc+= 2},

}

})

调用辅助函数mapMutations

import {mapState,mapMutations } from 'vuex' //按需导入辅助函数和计算属性配合

调用方法：

methods: {

...mapMutations(['add'])

},//调用 mapState 函数和展开运算符

computed:{

...mapState(['chuanc'])

}

组件展示：

{{chuanc}}添加

getters的使用(相当于计算属性)：

1.getters中定义的方法，就相当于vue的计算属性；

2.getters变化了那么getters生成的数据也会变化；