vuex.Store 基本属性介绍

属性介绍

vuex.Store 是 Vuex 的核心部分，它用于管理应用程序的状态，以及包含了一些基本属性和方法。以下是 vuex.Store 的基本属性：

1. state：

   state 是 Vuex 存储应用程序状态的地方。它是一个包含所有应用状态的对象。你可以通过 this.$store.state 来访问应用程序的状态数据。

   示例：

   const store = new Vuex.Store({
     state: {
       count: 0,
       user: null
     }
   });
   

2. getters：

   getters 允许你在访问状态数据之前对其进行计算或处理。它类似于计算属性，但可以被多个组件访问。getters 是一个包含计算属性的对象。

   示例：

   const store = new Vuex.Store({
     state: {
       todos: [...]
     },
     getters: {
       doneTodos: state => {
         return state.todos.filter(todo => todo.done);
       }
     }
   });
   

   在组件中，你可以通过 this.$store.getters.doneTodos 来获取计算后的数据。

3. mutations：

   mutations 定义了一组用于修改状态的函数。它们必须是同步的，每个函数都接收当前状态对象 state 作为第一个参数。

   示例：

   const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment: state => {
         state.count++;
       }
     }
   });
   

   在组件中，你可以通过 this.$store.commit('increment') 来触发一个 mutation 来修改状态。

4. actions：

   actions 允许你在应用中执行异步操作，并在完成后触发 mutations 来修改状态。actions 是一个包含操作函数的对象。

   示例：

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

   在组件中，你可以通过 this.$store.dispatch('incrementAsync') 来触发一个 action 来执行异步操作。

5. modules：

   modules 允许你将 Vuex store 分割成多个模块，每个模块都有自己的状态、mutations、actions 等。这有助于组织和管理大型应用程序的状态。

   示例：

   const moduleA = {
     state: { /* ... */ },
     mutations: { /* ... */ },
     actions: { /* ... */ }
   };
   
   const moduleB = {
     state: { /* ... */ },
     mutations: { /* ... */ },
     actions: { /* ... */ }
   };
   
   const store = new Vuex.Store({
     modules: {
       a: moduleA,
       b: moduleB
     }
   });
   

这些是 vuex.Store 中的基本属性，用于定义应用程序的状态、计算属性、修改状态的函数以及异步操作。通过这些属性和方法，你可以有效地管理应用程序的状态和数据流。

创建store实例

const store = new Vuex.Store({
// 定义的公共变量
  	state: {
  	  count: 1,
  	  stu: [{id:1,age:18,name:'dx'},{id:2,age:20,name:'yx'},{id:3,age:100,name:'xx'}]
  	},
  // state中的变量只能在mutations中通过方法修改
  	mutations: {
  	  changeCount: function (state) {
  	  	state.count++
  	  	console.log('改变了count')
  	  }
  	  //当你需要改变state并且同步的时候在这里
  	},
  	actions: {
  	//这里的东西全都是异步的
  	},
  	getters: {
  	  //当你需要改变state，并且需要经过比较复杂的计算时
  	  //里面的东西全都是一些方法
  	  //如果计算的东西，不需要组件传回参数，就直接返回一个值，
  	  more20age(state){
       return state.stu.filter(s =>s.age>=20) 
      }
  	  //如果计算的东西，需要组件传回参数，就返回一个方法
  	  moreage(state){
       return function(age){
         return state.stu.filter(s =>s.age>=age)
       }
     }
  	}
})