关于 state
每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便。
简单用法:在vuex 的计算属性中返回vuex 的状态
最基本的使用方式,通过在vue文件里面初始化 vuex 的 store 来进行操作 vuex 的数据:如下例子:
1 // 在组件里面使用 vuex 2 // 初始化 vuex 实例 3 const store = new Vuex.Store({ 4 state: { 5 count: 0 6 }, 7 mutations: { 8 increment: state => state.count++, 9 decrement: state => state.count-- 10 } 11 }) 12 13 // 创建一个 Counter 组件 14 const Counter = { 15 template: `<div>{{ count }}</div>`, 16 computed: { 17 count () { 18 // 直接返回 state 19 return store.state.count 20 } 21 } 22 } 23 24 // 初始化 vue 实例 25 const app = new Vue({ 26 el: '#app', 27 components: { Counter }, 28 template: ` 29 <div class="app"> 30 <button @click="increment">+</button> 31 <button @click="decrement">-</button> 32 <counter></counter> 33 </div> 34 ` 35 , 36 methods: { 37 increment () { 38 store.commit('increment') 39 }, 40 decrement () { 41 store.commit('decrement') 42 } 43 } 44 })