vuex
今天尝试使用vuex,把自己的实践经验记录下来,方便今后查阅,主要内容还是在官方文档中,感兴趣的朋友可以去研究研究
安装
npm install vuex --save

创建store
安装完vuex之后就是创建store,将vue中的state放到vuex中的store中统一管理,在store文件夹中创建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:0
}
const mutations = {
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
const actions = {
increment({commit}){
commit('increment')
},
decrement({commit}){
commit('decrement')
}
}
const store = new Vuex.Store({state,mutations,actions})
export default store
看文件内容:
1、首页文件引入vue和vuex,然后调用Vue.use(Vuex)
方法,将vuex加入到vue框架中
2、创建变量state,这个state中定义了vuex需要管理的状态
3、mutations,这个类似于react中的reducers,主要是‘状态修改逻辑’和‘修改动作名称’的映射关系
到这里其实就已经创建一个可使用的vuex了,可以在组件中调用this.$store.state.count
获取状态,也可以使用this.$store.dispath()
方法修改状态,但是只能完成同步操作
如果想在操作状态时加入异步操作,例如ajax,则需要加入action,action中可以写入异步操作
4、actions动作声明,可在action中调用mutations中的修改动作,可在action中写异步操作
5、调用new Vuex.Store()
方法生成实例并导出
把store注入vue框架
import Vue from 'vue'
import router from './router/router'
import store from './store'
import App from './pages/App.vue'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在main.js中导入store,在new Vue()
中引入store,这样vue下的所有组件都被注入了vuex,所有组件都可以通过this.$store.state.count
的方式获取状态或调用this.$store.dispatch('increment')
修改状态
在组件中使用vuex
<template>
<div id="app">
<img alt="Vue logo" src="../assets/logo.png">
<div>vuex数据count:{{ $store.state.count }}</div>
<HelloWorld @changeAgeDec="changeAgeDec" @changeAge="changeAge" :age="age" :name="name" msg="Welcome to Your Vue.js App"/>
<router-link class="link" to="pagea">跳转到pagea</router-link>
<router-link class="link" to="pageb">跳转到pageb</router-link>
<router-view></router-view>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import HelloWorld from '../components/HelloWorld.vue'
export default {
name: 'app',
data(){
return {
name:"liuhao",
age:29
}
},
methods:{
...mapActions({
increment:"increment", //将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
decrement:"decrement"
}),
changeAge(){
this.age++
this.increment()
},
changeAgeDec(){
this.age--
this.decrement()
}
},
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.link{
margin: 0 10px
}
</style>
可以在组件中使用this.$store
来使用vuex,获取值用this.$store.state.count
,修改值则调用this.$store.dispatch('increment')
但是vuex为开发人员提供了第二种方式,就是mapState和mapActions的方式,这两个方法类似于react-redux中connect方法中的mapStateToProps和mapDispatchToProps,都是讲store中的状态和dispatch映射到组件中,简化使用方式。
上面的代码中使用了mapActions之后在组件中就可以用this.decrement()
来替代this.$store.dispatch('increment')
使用module
vuex的Vuex.Store
接受参数module
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
在使用mapActions做映射是
export default {
name: 'app',
data(){
return {
name:"liuhao",
age:29
}
},
methods:{
...mapActions("a",{
increment:"increment", //将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
decrement:"decrement"
}),
changeAge(){
this.age++
this.increment()
},
changeAgeDec(){
this.age--
this.decrement()
}
},
components: {
HelloWorld
}
}
vuex是状态管理解决方案,可以有效简化组件中状态传递的方式,有什么需要补充的希望大家给出建议