vuex的五大属性（vuex的五个属性及使用方法示例）

一                 ，Vuex简介

Vuex是Vue.js的状态管理库
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，它通过中心化的状态管理使得组件间的数据共享更加容易
  
  
  
  
  
  
  
  
 。

Vuex包含五个核心属性：state
  
  
  
  
  
  
  
  
 、getters  
  
  
  
  
  
  
  
 、mutations
 


 


 


 


 


 


 


 


 
、actions和modules  
  
  
  
  
  
  
  
 。

Vuex是Vue.js的状态管理库
















，它提供了一种集中式存储管理应用程序中所有组件的状态 
  
  
  
  
  
  
  
  
，并将其分离到一个可预测的状态容器中
 


 


 


 


 


 


 


 


 
。Vuex包括五个核心属性：

二
  
  
  
  
  
  
  
  
 ，Vuex五个核心属性

1：state

state：定义了应用程序的状态
 


 


 


 


 


 


 


 


 ，就是我们要管理的数据
 
 
 
 
 
 
 
 
。

存放应用程序的状态（数据） 
 
 
 
 
 
 
 
 
，所有组件共享   
   
   
   
   
   
   
   
  。它是Vue实例的data属性的替代品
   
   
   
   
   
   
   
   
 ，但是通过它存储和管理的状态
 

 

 

 

 

 

 

 

 ，可以在整个应用程序中实现全局共享 

 

 

 

 

 

 

 

 
，即不同的组件可以通过定义的getter和setter访问同一状态数据
 

 

 

 

 

 

 

 

 
。 const store = new Vuex.Store({ state: { count: 0 } }) 2：getters

getters：用于获取State中的状态                 ，主要用于对state进行逻辑上的组合和应用

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，类似于Vue组件中的计算属性

 

 

 

 

 

 

 

 
。

const store = new Vuex.Store({ state: { count: 0 }, getters: { doubleCount(state) { return state.count * 2 } } }) 3：mutations

mutations：用于修改state中的数据
















，是唯一可以修改state的地方                  。mutations接收state作为第一个参数                          ，接收payload作为第二个参数
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。

用于修改State中的状态
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，只能同步执行
















。Mutation必须是同步函数

























，因为它们不能处理异步行为                 ，异步行为应该放在Action中处理                          。 const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ }, add(state, payload) { state.count += payload } } }) 4：actions

actions：用于异步操作和提交mutations
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，在actions中可以进行任何异步操作
















，最后再提交到mutations中同步修改state 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
。actions接收context作为第一个参数 
  
  
  
  
  
  
  
  
，其中包含了state
 
 
 
 
 
 
 
 
、getters和commit等属性

























。

可以包含任意异步操作（例如从服务器获取数据）
  
  
  
  
  
  
  
  
 ，可以用Mutation通过提交（commit）来修改State                 。

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync(context) { setTimeout(() => { context.commit(increment) }, 1000) } } }) 5：modules

modules：用于将store分割成模块
 


 


 


 


 


 


 


 


 ，每个模块都拥有自己的state   
   
   
   
   
   
   
   
  、mutation
 

 

 

 

 

 

 

 

 
、action

 

 

 

 

 

 

 

 
、getters和子模块 
 
 
 
 
 
 
 
 
，以便提高应用程序的可维护性  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
。

将State                  、Getter
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
、Mutation
















、Action模块化
   
   
   
   
   
   
   
   
 ，便于组件化和模块化开发
















。

const store = new Vuex.Store({ modules: { cart: { state: { items: [] }, mutations: { addItem(state, item) { state.items.push(item) } }, actions: { addAsyncItem(context, item) { setTimeout(() => { context.commit(addItem, item) }, 1000) } } } } })

使用方法示例：

const store = new Vuex.Store({ modules: { cart: { state: { items: [] }, mutations: { pushProductToCart (state, payload) { state.items.push({ id: payload.id, quantity: 1 }) } }, actions: { addProductToCart ({ state, commit }, product) { const cartItem = state.items.find(item => item.id === product.id) if (!cartItem) { commit(pushProductToCart, product) } } }, getters: { cartItems: state => { return state.items } } } } }) 这个代码创建了一个包含cart模块的Vuex store对象
 

 

 

 

 

 

 

 

 ，其中cart模块包含state                          、mutations 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
、actions和getters四个属性 

 

 

 

 

 

 

 

 
，用于管理购物车数据
  
  
  
  
  
  
  
  
 。在addProductToCart action中                 ，使用state.items和commit方法来修改cart模块中的数据  
  
  
  
  
  
  
  
 。在cartItems getter中

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 ，使用state.items来计算购物车中的商品数量和总价
 


 


 


 


 


 


 


 


 
。

三
















，Vuex使用方法

使用方法：

1：安装Vuex：npm install vuex --save 2：在main.js中                          ，导入Vuex
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，并使用Vue.use()方法注册Vuex
 
 
 
 
 
 
 
 
。 import Vue from vue import Vuex from vuex import App from ./App.vue Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) new Vue({ store, render: h => h(App) }).$mount(#app) 3：在组件中使用vuex中的数据和方法   
   
   
   
   
   
   
   
  。 <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.count } }, methods: { increment() { this.$store.commit(increment) } } } </script> 4：vuex综合案例

下面是一个简单的Vuex使用方法的示例：

// 引入Vue和Vuex import Vue from vue import Vuex from vuex Vue.use(Vuex) // 创建一个Store const store = new Vuex.Store({ // 定义State state: { count: 0 }, // 定义Mutation mutations: { increment: state => state.count++, decrement: state => state.count-- }, // 定义Getter getters: { evenOrOdd: state => state.count % 2 === 0 ? even : odd }, // 定义Action actions: { incrementIfOdd ({ commit, state }) { if ((state.count + 1) % 2 === 0) { commit(increment) } } } }) new Vue({ el: #app, store, template: ` <div> <p>Count: {{ count }}</p> <p>Even or Odd? {{ evenOrOdd }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> <button @click="incrementIfOdd">IncrementIfOdd</button> </div> `, computed: { count () { return this.$store.state.count }, evenOrOdd () { return this.$store.getters.evenOrOdd } }, methods: { increment () { this.$store.commit(increment) }, decrement () { this.$store.commit(decrement) }, incrementIfOdd () { this.$store.dispatch(incrementIfOdd) } } })

这个代码创建了一个Vuex Store

























，并定义了State

























、Mutation                 、Getter  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、Action
 

 

 

 

 

 

 

 

 
。然后将Store实例与Vue实例关联

 

 

 

 

 

 

 

 
。在Vue组件中                 ，使用计算属性（computed）和方法（methods）来访问State
















、Getter和Action                  。在方法中
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，使用commit来提交Mutation
















，使用dispatch来分发Action
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
。