Vue Store使用步骤详解_yarn_招方锁巧

Vue Store 使用步骤详解

一、安装Vuex

要在Vue项目中使用Vuex,首先通过npm或yarn安装Vuex。打开命令行界面,进入项目目录,然后运行以下命令之一:




npm install vuex



或者




yarn add vuex



二、创建Store

创建一个Store文件,通常命名为 store.js,并在其中定义状态(state)、变更状态的方法(mutations)、异步操作的函数(actions)和计算属性(getters)。




// store.js



import Vue from 'vue';



import Vuex from 'vuex';







Vue.use(Vuex);







export default new Vuex.Store({



  state: {



    count: 0



  },



  mutations: {



    increment(state) {



      state.count++;



    }



  },



  actions: {



    incrementAsync({ commit }, number) {



      setTimeout(() => {



        commit('increment', number);



      }, 1000);



    }



  },



  getters: {



    doubledCount(state) {



      return state.count  2;



    }



  }



});



三、在Vue实例中注册Store

在Vue项目的入口文件(通常是 main.js)中引入Vuex,并注册Store。




// main.js



import Vue from 'vue';



import App from './App.vue';



import store from './store'; // 引入store







new Vue({



  store, // 注册store



  render: h => h(App)



}).$mount('app');



四、在组件中使用Store

现在你可以在Vue组件中访问和使用Store了。

操作 示例
访问状态 computed: { count: state => state.count }
提交变更 methods: { increment() { this.$store.commit('increment') } }
分发异步操作 methods: { incrementAsync() { this.$store.dispatch('incrementAsync', number) } }

五、模块化Store

对于大型项目,可以考虑将Store模块化。




// modules/mutations.js



export const increment = 'increment';







// modules/actions.js



export const incrementAsync = 'incrementAsync';







// store.js



import mutations from './modules/mutations';



import actions from './modules/actions';







export default new Vuex.Store({



  // ...



  mutations,



  actions,



  // ...



});



六、持久化Store

为了将Store的状态持久化到本地存储,可以使用Vuex插件。




// plugins/persistedState.js



export default store => {



  store.subscribe((mutation, state) => {



    localStorage.setItem('store', JSON.stringify(state));



  });



  const savedState = localStorage.getItem('store');



  if (savedState) {



    store.replaceState(JSON.parse(savedState));



  }



};



然后在main.js中引入并使用这个插件:




// main.js



import plugins from './plugins/persistedState';







new Vue({



  store: new Vuex.Store({



    // ...



  }),



  plugins



}).$mount('app');



使用Vue Store主要包括安装Vuex、创建并配置Store、在Vue实例中注册Store以及在组件中使用Store。通过这些步骤,你可以有效地管理Vue应用的状态,提高开发效率和代码的可维护性。