1.Vuex的如何使用
1.先创建一个store文件夹/里面创建一个index.js
2.在 index.js 导入Vue和Vuex导完Vuex记得Vue.use(Vuex)一下
3.导入一个新的Vuex实例export default new Vuex.Store({})
4.index.js代码如下直接c+v
1-state:写我们的数据类似于vue中的data
2-mutations写方法类似于vue中的methods
3-actions写异步操作方法定时器等。。
4-modules是一个小的模块化大白话讲就是小的Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num:0,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
},
mutations: {
// 修改num数据
setcount(state){
state.num++
},
// 弹窗
setalert(){
alert('这是VueX的一个方法')
}
},
actions: {
},
modules: {
}
});
5.在min.js入口文件里面导入store挂载到视图上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
6.在我们需要共享Vuex状态的组件里面导入mapState,mapMutations
//在计算属性里面展开...mapState
//在methods里面展开...mapMutations
import{mapState,mapMutations} from 'vuex'
<template>
<div>
<h1>{
{ num }}</h1>
<button @click="setcount">修改Vuex的数据</button>
<button @click="setalert" style="background: pink">获取Vuex的方法</button>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
computed: {
...mapState(["num"]),
},
methods: {
...mapMutations(["setcount", "setalert"]),
},
};
</script>
<style></style>