安装 vuex
NPM
npm install vuex --save
开始
新建store文件 ,在store文件夹中创建store.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 这个一定一定不要忘记
// ============================ 写法一
const state = {
num: 15 // 公用的状态
}
const mutations = {
add(state) {
state.num++
},
minus(state) {
state.num--
}
}
export default new Vuex.Store({
state,
mutations
})
//================================== 写法二
export default new Vuex.Store({
state: {
num: 15
},
mutations: {
add: state => state.count++,
minus: state => state.count--
}
})
main.js 文件中
import Vue from 'vue'
import store from './store/store.js'
new Vue({
el: '#app',
store, // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
render: h => h(App)
})
在App.vue中使用
在所有组建中可以用this.$store.state.num 访问数据
<div id="app">
{{$store.state.num}}
<div class="">
<button type="button" name="buttonAdd" @click="$store.commit('add')">加一个</button><!-- vue2.0 的写法 -->
<button type="button" name="buttonAdd" @click="$store.commit('minus')">减一个</button>
</div>
</div>
页面渲染
说明:
不可以直接修改store.state中的num值,要通过store.commit中的方法显示的修改store,state.num的值
store.commit('add') // 为了可以明确清晰地追踪到store.state.num值的变化