1、安装vue-cli脚手架
2、初始化
- src目录下新建一个store文件并新建一个store.js文件
- 引入vue和vuex并显式的通过Vue.use(Vuex)来安装Vuex
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
3、创建
- 新建一个state对象(数据源),用于存放数据
- 新建一个mutations对象,用于修改状态
- 注册并暴露,让外部可以引用
//store.js文件
//state
const state = {
count: 0
}
//mutations
const mutations = {
increment: state => state.count++,
decrement: state => state.count--
}
//注册、暴露
export default new Vuex.Store({
state,
mutations
})
4、创建一个新的子组件(或者你可以把模板自带的App.vue内容删了后直接用)
- 编写<tempalte/>内容
<template>
<div>
<p>{{count}}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</template>
- import引入store.js
- 定义computed计算属性和methods方法
import store from '@/store/store'
export default {
//注册store
store,
name: 'app',
computed: {
count() {
return store.state.count
}
},
methods: {
increment() {
store.commit("increment")
},
decrement() {
store.commit("decrement")
}
}
}
上面有几个知识点:
1. 由于vuex的状态存储是响应式的,从store实例中获取状态最简单的方法就是在计算属性中返回某个状态。
2. 通过store.state来获取状态对象,通过store.commit方法触发状态变更。
3. 我这里的store是直接注册在了这个子组件中, Vuex 通过 store 选项,提供了一种机制将状态从根组件『注入』到每一个子组件中,也就是说如果你在根组件里注册了store选项,那么子组件用this.$store就能访问到了。
以上就是官网上那个示例具体到项目中的的简单实现了。
参考:https://router.vuejs.org/zh-cn/installation.html